如何实现可拉伸且内容超出时自动滚动的<div>？

我需要实现一个<div>，使其填充父<div>的所有可用垂直空间，当内部内容过多超出父容器时，能自动滚动。尝试了min-height: 0; flex: 1; overflow-y: auto;方案但没生效，当前代码运行时，目标div没有滚动，反而继续扩大超出左侧列的边界。

原代码 #

CSS #

.box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  border: 1px solid #000;
  padding: 0.5em;
}

.inner {
  flex: 1;               
  overflow-y: scroll;     
  min-height: 0;
  border: 1px solid #000;
  padding: 0.5em;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
}

.col {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.5em;
  border: 1px solid #000;
  padding: 0.5em;
}

HTML #

<div class="row">
  <div class="col">
    <div class="box">
      text. <br><br> text. <br><br> text. <br><br> text. <br><br>
    </div>
  </div>
  <div class="col">
    <div class="box">
      <div class="inner">
        text. <br><br>text. <br><br>text. <br><br>text. <br><br>text. <br><br>
      </div>
    </div>
  </div>
</div>

问题原因 #

整个flex布局链缺少明确的高度约束：

• 最外层的.row没有设置高度，导致它会被内部内容无限撑开
• flex布局在列方向（flex-direction: column）下，默认min-height: auto，.col和.box会跟随内容高度延伸，.inner的flex:1无法获取固定的可用空间，自然不会触发滚动

解决方案 #

调整CSS，给整个布局添加高度基准，并解除flex列的最小高度限制：

修改后的CSS #

/* 给最外层容器设置明确高度，示例用视口高度，可根据实际场景调整 */
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
  height: 100vh;
  margin: 0;
}

.col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5em;
  border: 1px solid #000;
  padding: 0.5em;
  min-height: 0; /* 解除flex列的最小高度限制，允许被收缩 */
}

.box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  border: 1px solid #000;
  padding: 0.5em;
  min-height: 0; /* 让.box适应父容器高度，不被内容撑开 */
}

.inner {
  flex: 1;               
  overflow-y: auto; /* 内容超出时显示滚动条，否则隐藏 */
  min-height: 0;
  border: 1px solid #000;
  padding: 0.5em;
}

关键修改点 #

• 给最外层.row设置高度（如100vh），为整个布局提供高度基准
• 给.col和.box添加min-height: 0，打破flex列方向默认的高度自适应行为，让它们能被约束在父容器内
• 将.inner的overflow-y: scroll改为overflow-y: auto，提升用户体验

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