如何让子元素的最大高度随另一动态高度子元素适配？

需求说明 #

容器内包含两个子元素：

• 内容较少的子元素高度动态可调（用户可修改）
• 另一个子元素需与前者高度保持一致，内容超出时显示垂直滚动条
• 无法为父容器设置min-height或max-height

问题分析 #

原代码中align-items: flex-start会让子元素以自身高度对齐，导致内容较多的子元素无法同步匹配另一个子元素的高度；直接使用max-height也无法动态适配目标子元素的高度变化。

解决方案 #

修改CSS，利用Flex布局特性实现高度同步与滚动效果：

.container {
  display: flex;
}

.child {
  max-width: 300px;
  padding: 10px;
}

.child1 {
  background: red;
  flex: 1;
  height: 0;
  overflow-y: auto;
}

.child2 {
  background: green;
  flex-shrink: 0;
}

HTML结构保持不变：

<div class="container">
  <div class="child child1">
    Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem
  </div>
  <div class="child child2">
    Lorem lorem Lorem lorem Lorem
  </div>
</div>

原理说明 #

• flex:1让内容较多的child1在容器中占据剩余空间，配合height:0强制浏览器基于Flex布局计算其高度（而非自身内容高度），从而同步匹配child2的高度
• flex-shrink:0确保内容较少的child2不会被压缩，保持自身内容决定的高度
• overflow-y:auto在child1内容超出匹配高度时自动显示垂直滚动条

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