如何实现无固定高度且占满视口的可滚动div？

我完全懂你的困扰——既要让左侧菜单自动占满视口剩下的高度，又要在内容过多时能滚动，固定高度的方案实在太不灵活了。其实问题就出在没利用好Flexbox的特性来限制菜单容器的高度，同时触发滚动效果。

问题根源拆解 #

你当前的代码里存在两个矛盾点：

• 给scrollable-menu设固定高度时，滚动功能正常，但容器没法跟着视口高度变化；
• 去掉固定高度后，容器会被列表内容彻底撑开，高度和内容完全一致，自然不会触发滚动（毕竟没有内容溢出）。

好在你的wrapper已经通过flex:1拿到了视口的剩余高度（减去header的高度），我们只需要让scrollable-menu继承这个高度，再处理溢出内容就行。

修改方案（只需调整菜单的CSS） #

把scrollable-menu的CSS改成这样：

.scrollable-menu {
  background-color: lightgray;
  width: 240px;
  overflow-y: auto; /* 内容溢出时显示滚动条，没溢出时自动隐藏 */
  height: 100%; /* 让容器占满父元素wrapper的全部高度 */
  /* 可选：如果想确保宽度固定不被压缩，可加上 flex: 0 0 240px; */
}

完整修改后的CSS代码 #

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

header {
  display: flex;
  justify-content: center;
  background-color: darkkhaki;
}

ul li {
  padding: 10px;
}

.wrapper {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.scrollable-menu {
  background-color: lightgray;
  width: 240px;
  overflow-y: auto;
  height: 100%;
}

.content {
  padding: 15px;
  background-color: lightgreen;
  flex: 1;
}

为什么这样能行？ #

1. height:100%让菜单容器直接继承父元素wrapper的高度——也就是视口减去header后的剩余空间；
2. overflow-y:auto会给容器建立一个块级格式化上下文（BFC），容器高度不再被子元素撑开，当列表内容超过容器高度时，自动显示垂直滚动条；
3. 保留wrapper的flex:1，确保它能稳稳占据body的剩余高度，为菜单提供足够的空间。

这样调整后，你的菜单就能完美适配视口高度，内容多了还能滚动，完全不用依赖固定高度啦！

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