Flex布局下Div无法收缩、滚动条异常问题求助

问题场景 #

需要实现如下布局：

• .grand-parent 占满页面垂直高度
• .sibling 和 .bottom-child 为固定高度
• .parent 和 .top-child 尽可能占用剩余垂直空间，仅允许 .top-child 内部出现滚动，全局不触发滚动

当前问题：当 .top-child 填充大量内容后，缩小页面垂直高度时，.top-child 既不收缩也不显示滚动条，反而 .grand-parent 出现了全局滚动条。

问题原因 #

Flex布局中，子元素内容超出时默认会拉伸父容器。虽然 .parent 设置了 flex:1，但未限制其溢出行为，导致 .top-child 的过多内容撑开 .parent，进而让 .grand-parent 超出视口高度，触发全局滚动。

修复方案 #

给 .parent 添加 overflow: hidden，限制其不会被内部内容撑开，确保 .top-child 的 overflow: auto 能正常生效。

修改后的CSS代码：

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grand-parent {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.parent {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden; /* 新增：限制父容器不被内容撑开 */
}

.top-child {
  flex: 1;
  border: 1px solid #000;
  padding: 10px;
  overflow: auto;
}

.bottom-child {
  min-height: 101px;
  border: 1px solid #000;
  padding: 10px;
}

.sibling {
  min-height: 50px;
  border: 1px solid #000;
  padding: 10px;
}

对应的HTML保持不变：

<div class="grand-parent">
  <div class="sibling">Sibling of Parent</div>
  <div class="parent">
    <div class="top-child">***lots of content***</div>
    <div class="bottom-child">Bottom Child</div>
  </div>
</div>

原理说明 #

• .grand-parent 通过 height:100vh 和 flex 列布局，固定占满视口高度
• .sibling 和 .bottom-child 维持固定最小高度，占据固定垂直空间
• .parent 的 overflow: hidden 确保它始终保持 flex:1 分配的剩余空间，不会被内部内容撑开
• .top-child 的 flex:1 会占据 .parent 的全部剩余空间，当内容超出容器高度时，overflow:auto 自动触发内部滚动条，避免全局滚动

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