如何实现两个等高div布局，其中一个带垂直滚动条

可以通过Flexbox布局轻松实现这个需求，核心是让容器高度由#base-height的动态内容决定，同时限制#with-scroll的最大高度并开启垂直滚动。

完整代码实现 #

HTML结构

<div id="container">
  <div id="base-height">
    <pre>
      some
      items
      with dynamic height
    </pre>
  </div>
  <div id="with-scroll">
    some other content with vertical scroll, if it is higher than div#base-height<br>
    line 1<br>
    line 2<br>
    line 3<br>
    line 4<br>
    line 5<br>
    line 6<br>
    line 7<br>
    line 8
  </div>
</div>

CSS样式

#container {
  display: flex;
  align-items: flex-start;
  gap: 1rem; /* 可选：给两个子元素之间添加间距 */
  border: 1px solid #ccc; /* 可选：方便查看容器范围 */
}

#base-height {
  flex: 0 0 auto; /* 宽度由内容决定，不拉伸不收缩 */
  width: 200px; /* 可选：设置固定宽度，也可替换为百分比 */
  border: 1px solid #eee; /* 可选：方便查看元素范围 */
}

#with-scroll {
  flex: 1; /* 占满容器剩余宽度 */
  max-height: 100%; /* 最大高度与容器高度（即#base-height高度）一致 */
  overflow-y: auto; /* 内容超出高度时显示垂直滚动条 */
  border: 1px solid #eee; /* 可选：方便查看元素范围 */
}

关键要点解释 #

• #container用display: flex实现并排布局，容器高度会自动适配#base-height的动态内容高度。
• #base-height通过flex: 0 0 auto保证自身尺寸不受Flex布局拉伸影响，可根据需求自定义宽度。
• #with-scroll依靠flex: 1占据剩余宽度，max-height: 100%限制其最高高度与容器一致，overflow-y: auto在内容超出时自动触发垂直滚动。

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