如何让row方向flex容器不占满垂直空间以显示子元素滚动条？

嘿，这个坑我之前踩过！不用费劲计算header高度写calc(100vh - ...)，也完全没必要退回到table布局，纯CSS就能解决你的问题，核心就是控制flex容器的交叉轴对齐方式。

问题根源 #

你遇到的问题是flex布局的默认行为：当flex-direction: row时，容器的交叉轴是垂直方向，默认的align-items: stretch会强制所有子元素的高度和容器一致——这就导致你的列表容器被撑满了整个垂直空间，自然没法出现滚动条。

直接解决方案 #

给你的#main容器加一行CSS就行：

#main {
  flex-direction: row;
  align-items: flex-start; /* 关键：让子元素不再被垂直拉伸 */
  height: 100%; /* 确保它占满header下方的剩余空间 */
}

或者如果你只想让列表容器不被拉伸，也可以单独给列表容器设置：

.list-container {
  align-self: flex-start;
  height: 100%;
  overflow-y: auto; /* 内容超出时显示滚动条 */
}

原理拆解 #

• align-items是flex容器的属性，控制交叉轴方向（这里是垂直方向）上子元素的对齐方式，把默认的stretch改成flex-start，子元素就会保持自身高度，不会被强制撑满容器。
• 给列表容器设置height:100%是让它占满#main容器的高度，再配合overflow-y:auto，当内容超出时就会自动出现滚动条。

完整布局逻辑 #

1. 保持最外层的column方向flex容器不变，让它占满整个视口高度，header正常占据自身高度，剩下的空间自动分配给#main。
2. 给#main设置align-items: flex-start，阻止侧边栏和列表容器被垂直拉伸。
3. 给列表容器加上overflow-y: auto，搞定滚动效果。

这样下来，既不用依赖header的高度计算，又能完美实现带侧边栏的可滚动列表，完全用flex布局就能搞定～

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