position: sticky 在 Flex 容器（尤其是 flex-direction: row）中失效，通常是因为粘性定位依赖于滚动容器的可滚动边界，而父级 Flex 容器未产生滚动上下文或高度约束不足。本文详解根本原因与两种可靠解决方案。
`position: sticky` 在 flex 水平布局中失效，通常是因为粘性定位依赖于**滚动容器的可滚动边界**，而父级 flex 容器未产生滚动上下文或高度约束不足。本文详解根本原因与两种可靠解决方案。
position: sticky 并非“绝对固定”，而是介于 relative 和 fixed 之间的相对定位行为：它会在其最近的可滚动祖先容器内，随滚动到达指定阈值（如 top: 0）时“吸附”到该容器视口边缘。然而，在你当前的布局中，.wiki-page 是一个 flex-row 容器，且默认不产生滚动——它的两个子元素（导航栏容器和内容区）被 align-items: stretch 拉伸至相同高度，但整个 .wiki-page 本身没有设置高度限制，也未启用 overflow，因此浏览器无法确定“滚动上下文”的边界，导致 sticky 失效。
✅ 正确方案一：将 sticky 应用于容器（推荐）
将 position: sticky 移至外层容器 #menu-bar-container，并确保其具备明确的滚动上下文：
.wiki-page {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch; // ← 保持子项等高
height: 100vh; // ✅ 关键：为 flex 容器设显式高度（如 viewport 高度）
overflow: hidden; // 防止容器自身滚动干扰
#menu-bar-container {
position: sticky;
top: 0;
height: 100%; // 保证容器高度可参与 sticky 计算
width: 500px;
}
#menu-bar {
position: relative; // 恢复为相对定位
width: 100%;
max-height: calc(100vh - $margin * 2);
overflow-y: auto; // ✅ 允许导航栏内部滚动（如菜单过长）
}
#wiki-content {
flex: 1; // 占据剩余宽度
overflow-y: auto; // ✅ 内容区独立滚动 —— 这才是真正的滚动容器！
}
}
? 原理说明：此时
#menu-bar-container成为 sticky 元素，其top: 0相对于.wiki-page（因.wiki-page有height: 100vh且overflow: hidden，构成有效的块格式化上下文）生效；而#wiki-content的overflow-y: auto确保文章内容可滚动——这才是sticky行为所依赖的实际滚动容器。
✅ 正确方案二：改用 position: fixed（适用于全局固定场景）
若导航栏需始终固定在视口左侧，不随页面其他区域（如页眉/页脚）变化，可直接使用 fixed：
#menu-bar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 500px;
overflow-y: auto;
z-index: 1000;
}
⚠️ 注意：此时需手动为 #wiki-content 添加 margin-left: 500px 或 transform: translateX(500px)，避免内容被遮挡。
⚠️ 常见陷阱总结
- ❌ 不要对 Flex 子项直接设
sticky，除非其父容器是可滚动的、且高度受限； - ❌ 避免在无高度约束的
flex-row容器中依赖子项sticky—— 浏览器无法计算“滚动锚点”； - ✅
sticky必须配合top/bottom/left/right使用，且目标方向上需有足够的滚动空间； - ✅ 推荐结构：
.wiki-page { height: 100vh; display: flex; } → #wiki-content { overflow-y: auto; flex: 1; }，让内容区成为唯一滚动源。
通过以上任一方式，即可让导航栏在水平 Flex 布局中稳定实现“随内容滚动而吸附”的交互效果。
