content-left容器内容无法正常滚动，超出父容器高度求助

问题描述 #

设置content-left容器的overflow: scroll后，内部高度为1000px的内容并未触发滚动，反而直接超出父容器范围，导致页面整体溢出。

问题原因 #

在Flex布局中：

1. content-container作为垂直Flex容器（main-container）的子项，默认会根据内部内容高度拉伸，忽略父容器的剩余空间限制。
2. content-left作为content-container的子项，高度默认由内容决定，没有明确的高度约束，因此overflow属性无法生效（overflow需要容器有确定的高度限制才能触发滚动）。

解决方案 #

通过以下两步修改CSS即可解决：

修改后的完整代码 #

.main-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: red;
}

.content-container {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  min-height: 0; /* 允许容器收缩到父容器分配的可用空间 */
}

.content-container>div {
  flex: 1;
}

.content-left {
  overflow: auto; /* 仅在内容超出时显示滚动条 */
  height: 100%; /* 让容器高度继承父容器的高度 */
}

.scrolling-content {
  height: 1000px;
  background-color: yellow;
}

<div class="main-container">
  <div>Navgation</div>
  <div>Notification Bar</div>
  <div class="content-container">
    <div class="content-left">
      <div class="scrolling-content">Scrolling Content</div>
    </div>
    <div class="content-right">2</div>
  </div>
  <div>Footer</div>
</div>

关键修改说明 #

• min-height: 0：添加到content-container，打破垂直Flex容器子项的默认拉伸行为，确保其高度被限制在main-container分配的剩余空间内。
• height: 100%：设置content-left的高度完全继承父容器，配合overflow: auto，当内部内容超出容器高度时自动触发滚动。

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