基于Flexbox的三列独立滚动粘性布局实现求助

针对你的Flexbox三列布局需求，在不改动HTML结构的前提下，直接给另外两列的容器复用左侧导航的CSS规则即可实现目标效果：

核心代码 #

假设另外两列的类名分别为.middle-content和.right-sidebar，添加以下CSS：

.middle-content, .right-sidebar {
  position: sticky;
  align-self: flex-start;
  top: 0;
  height: calc(100vh - 4em);
  overflow-y: scroll;
}

原理说明 #

• position: sticky配合top: 0，让列滚动到视口顶部时固定位置
• align-self: flex-start确保Flex布局中sticky元素的定位逻辑正常生效
• height: calc(100vh - 4em)限制列的高度（4em对应主导航的高度，可根据实际调整），超出部分触发滚动
• overflow-y: scroll开启列的独立垂直滚动，各列滚动互不干扰

注意点 #

• 确认Flex容器未设置overflow: hidden，否则会破坏sticky的定位效果
• 动态添加内容无需调整HTML，只要列容器的类名保持不变，规则会自动适配
• 若主导航高度变更，同步修改calc(100vh - 4em)中的数值即可

内容的提问来源于stack exchange，提问作者Emma Earl Kent