如何让Flexbox子元素匹配高度动态变化的第一个子元素高度？

可以通过CSS Grid布局实现纯CSS解决方案，无需JavaScript。核心思路是利用Grid单元格高度统一的特性，同时通过overflow限制第二个子元素的内容撑开高度：

修改后的代码 #

CSS

.parent {
  background-color: red;
  display: grid; /* 替换flex为grid布局 */
  grid-template-columns: repeat(3, 1fr); /* 三列等宽分配 */
  gap: 1rem;
}

.child {
  font-size: 2rem;
}

.child1 {
  background: purple;
}

.child2 {
  background: green;
  overflow-y: auto; /* 垂直方向内容超出时滚动 */
}

.child3 {
  background: grey;
}

HTML

<div class="parent">
  <div class="child1 child">
    This div has dynamic amount of lines... <br>line 1 <br> line 2 <br/>line 3 <br> line 4 <br> line 5<br/>
  </div>
  <div class="child2 child">
    This div has a lot of lines... <br>line 1 <br> line 2 <br/>line 3 <br> line 4 <br> line 5<br/> line 6 <br> line 7 <br/>line 8 <br> line 9 <br> line ...<br/>
  </div>
  <div class="child3 child">
    some other div <br> 1 <br>2 <br/> 3 <br> 4
  </div>
</div>

原理说明 #

1. Grid布局的统一行高：Grid会自动让同一行的所有单元格高度保持一致，默认行高由内容最高的单元格决定，但当某单元格内的元素设置overflow属性后，该单元格不会被内部超长内容撑开，行高会由其他未被限制的单元格（这里是第一个子元素）决定。
2. 滚动处理：给第二个子元素添加overflow-y: auto，确保超出高度的内容可通过滚动查看，同时不会影响父容器的整体高度。

如果坚持使用Flex布局，也可通过嵌套容器实现，但Grid方案更简洁直接，无需额外结构嵌套。

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