如何避免Flex容器垂直扩张，实现侧边栏填充剩余垂直空间

问题分析 #

当前布局中，.container 未被设置为填充 .page 的剩余垂直空间，且侧边栏的内容会默认撑开flex容器高度，导致设置了100vh的.page出现滚动条。需要让.container填满页面剩余空间，同时侧边栏在自身范围内滚动，不影响容器尺寸。

解决方案 #

修改CSS代码，关键调整如下：

• 给.container添加flex: 1，使其填充.page中.menu下方的剩余垂直空间
• 给.container添加overflow: hidden，防止子元素撑开容器高度
• 确保侧边栏设置overflow-y: auto，内容超出时显示垂直滚动条

修改后的完整CSS代码 #

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: orange;
}

.menu {
  width: 100%;
  height: 50px;
  background-color: lightblue;
  flex-shrink: 0;
}

.container {
  background-color: lightcoral;
  display: flex;
  flex-direction: row;
  flex: 1; /* 填充page的剩余垂直空间 */
  overflow: hidden; /* 避免子元素撑开容器 */
}

.sidebar {
  width: 300px;
  overflow-y: auto; /* 内容超出时垂直滚动 */
}

.content-item {
  height: 400px;
  width: 90%;
  margin: 10px;
  background-color: white;
}

html,
body {
  padding: 0;
  margin: 0;
}

代码解释 #

1. flex: 1 on .container：由于.page是垂直方向的flex容器，flex:1会让.container占据.menu（固定50px）之外的所有剩余垂直空间。
2. overflow: hidden on .container：限制容器的高度不会被内部内容撑开，确保其高度始终等于分配的剩余空间。
3. overflow-y: auto on .sidebar：当侧边栏内的内容高度超过容器高度时，自动显示垂直滚动条，内容在侧边栏内部滚动，不会影响外部容器和页面整体布局。

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