在 Flex 容器中使用 position: sticky 时，若侧边栏无法随滚动固定定位，通常是因为其默认的交叉轴对齐方式（align-items: stretch）导致粘性行为失效；只需添加 align-self: flex-start 即可修复。
在 flex 容器中使用 `position: sticky` 时，若侧边栏无法随滚动固定定位，通常是因为其默认的交叉轴对齐方式（`align-items: stretch`）导致粘性行为失效；只需添加 `align-self: flex-start` 即可修复。
position: sticky 的生效依赖于元素在滚动容器内拥有明确的边界上下文。当 .sui-layout-sidebar 作为 Flex 子项存在于 display: flex 的父容器（.sui-layout-body__inner）中时，若未显式设置 align-self，它将继承父容器的 align-items: stretch（默认值），强制拉伸填满交叉轴（即高度方向）。这种拉伸会破坏 sticky 的“锚定参考区域”，使浏览器无法正确计算其粘性偏移范围，最终导致 top: 0 失效。
✅ 正确解法是在侧边栏样式中添加：
.sui-layout-sidebar {
/* 其他原有样式保持不变 */
position: sticky;
position: -webkit-sticky; /* 兼容 Safari */
top: 0;
align-self: flex-start; /* 关键修复：避免交叉轴拉伸 */
}
⚠️ 注意事项：
- align-self: flex-start 确保侧边栏仅占据内容所需高度，为 sticky 提供清晰的滚动上下文；
- 父容器 .sui-layout-body__inner 无需设置 overflow: hidden 或其他限制滚动的属性，否则可能截断 sticky 效果；
- 若侧边栏内部内容高度超出视口，sticky 仍会正常工作——它只在元素进入/离开视口时触发固定/释放；
- 浏览器兼容性方面，-webkit-sticky 仍建议保留以支持旧版 Safari（iOS
- 不要误用 position: fixed 替代：fixed 会脱离文档流、无法响应父容器布局，且难以与 flex 主内容协同宽度计算。
总结：Flex + Sticky 的经典组合问题，根源在于对齐行为干扰了粘性定位的计算逻辑。align-self: flex-start 是轻量、语义清晰且符合规范的解决方案，无需重构 HTML 结构或引入 JavaScript，即可让侧边栏真正“粘”住顶部，同时保持右侧主内容自由滚动。
