如何让两个内部div垂直同步增长且外部div处理垂直滚动？

我有一个设置了max-height和overflow-y: auto的外层div，内部包含两个并排的div，它们的高度会随各自内容垂直变化。左侧div为灰色背景，右侧div为白色背景。我需要实现：

• 两个div垂直同步增长
• 高度受外层div的max-height限制
• 仅外层div显示垂直滚动条

当前问题是左侧div的灰色背景无法延伸至外层div底部。

原HTML代码 #

<div class="outer">
  <div class="inner-left">
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
  </div>
  <div class="inner-right">
      Right Content
  </div>
</div>

原CSS代码 #

.outer {
  display: flex;
  overflow-y: auto;
  max-height: 100px;
  border: 1px solid black;
  padding: 16px;
}

.inner-left {
  background-color: grey;
  width: 50%;
}

.inner-right {
  background-color: white;
  width: 50%;
}

解决方案 #

问题根源在于flex布局中，当外层div出现滚动时，子元素默认只会跟随自身内容高度，不会填充到外层滚动容器的可视高度。可以通过两种方式解决：

方案一：直接设置子元素最小高度 #

通过给两个内层div添加min-height: 100%，强制它们高度至少等于外层容器的可视高度，配合flex默认的align-items: stretch属性，实现高度同步：

.outer {
  display: flex;
  overflow-y: auto;
  max-height: 100px;
  border: 1px solid black;
  padding: 16px;
  align-items: stretch; /* 显式确保子元素拉伸 */
}

.inner-left {
  background-color: grey;
  width: 50%;
  min-height: 100%; /* 强制高度匹配外层容器可视高度 */
}

.inner-right {
  background-color: white;
  width: 50%;
  min-height: 100%; /* 同步左侧高度 */
}

方案二：调整容器结构（兼容性更强） #

在外层滚动容器内嵌套一个flex布局的wrapper，让wrapper撑满滚动容器的高度，再实现内部两个div的并排布局：

<div class="outer">
  <div class="inner-wrapper">
    <div class="inner-left">
        <div>Left Content</div>
        <div>Left Content</div>
        <div>Left Content</div>
        <div>Left Content</div>
        <div>Left Content</div>
        <div>Left Content</div>
        <div>Left Content</div>
        <div>Left Content</div>
        <div>Left Content</div>
        <div>Left Content</div>
        <div>Left Content</div>
    </div>
    <div class="inner-right">
        Right Content
    </div>
  </div>
</div>

.outer {
  overflow-y: auto;
  max-height: 100px;
  border: 1px solid black;
  padding: 16px;
}

.inner-wrapper {
  display: flex;
  min-height: 100%; /* 撑满外层滚动容器的可视高度 */
}

.inner-left {
  background-color: grey;
  width: 50%;
}

.inner-right {
  background-color: white;
  width: 50%;
}

两种方案都能实现两个div高度同步、灰色背景延伸至外层底部，且仅外层div显示垂直滚动条的需求。

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