Flex容器内固定A、C列且中间列可滚动的实现方法咨询

不需要修改HTML结构，仅调整CSS即可实现需求，利用position: sticky保留flex布局的流式特性同时固定A、C列：

html,body{
  height:100%;
  margin: 0; /* 移除默认边距避免布局偏移 */
}
.container{
  display:flex;
  min-height:100vh; /* 确保容器至少占满视口高度 */
}
.a,.c{
  width:100px;
  height:100vh; /* 设为视口高度，填满整个窗口 */
  background-color:pink;
  position: sticky; /* 启用粘性定位 */
  top: 0; /* 顶部粘住视口 */
  bottom: 0; /* 底部粘住视口，确保列高度始终匹配视口 */
}
.b{
  flex: 1; /* 替换固定宽度，让B列自适应剩余空间，贴合流式布局 */
  background-color:tomato;
  height:3000px;
}

关键说明 #

• position: sticky 既保留了A、C列在flex布局中的水平位置（无需手动设置left/right），又能让它们在页面滚动时固定在视口内，完美适配流式布局需求。
• 设置top:0和bottom:0是为了让固定列始终填满视口高度，不会因内容不足缩短。
• 将B列的width:400px改为flex:1，可让它自动填充容器剩余空间，更符合流式设计逻辑。

内容的提问来源于stack exchange，提问作者nicole