如何让一个div的最大高度匹配另一个div并超出时显示滚动条

需求 #

让child2的最大高度与child1的高度保持一致，当child2内容超出该高度时自动显示滚动条；禁止设置固定像素高度、必须保持布局灵活性，且不能使用JavaScript。此前尝试flexbox或grid布局未达到预期效果。

问题分析 #

你之前的flex布局代码中，child2的max-height: 100%无法生效，原因是flex容器的高度由内部内容共同撑开，child2作为flex项，百分比高度没有明确的参考基准，无法关联到child1的高度。

解决方案 #

使用Grid布局可以轻松实现这个需求：通过Grid的行高由child1决定，让child2的高度强制等于该行高度，超出部分设置滚动即可。

完整代码 #

.parent {
  display: grid;
  grid-template-columns: auto 1fr; /* 第一列宽度由child1内容决定，第二列占剩余空间 */
}

.child1 {
  background: #eeeeee;
}

.child2 {
  height: 100%;
  overflow: auto;
  background: #cccccc;
}

<div class="parent">
  <div class="child1">
    <h2>Child1</h2>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
  </div>
  <div class="child2">
    <h2>Child2</h2>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
    <p>此内容高度不能超过"child1"的高度</p>
  </div>
</div>

原理说明 #

• Grid容器的行高默认由该行中最高的元素决定，这里child1的高度会直接确定整行的高度。
• child2设置height: 100%会强制其高度等于行高，超出部分通过overflow: auto显示滚动条，完美实现高度关联且无需固定高度或JS。

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