我有两个兄弟元素，每个元素都包含动态内容。
2
1044<div class="flex">
<div class="sibling-1"></div>
<div class="sibling-2"></div>
</div>
在某些情况下，sibling-1的内容会比sibling-2多，反之亦然。
我希望第二个元素sibling-2的高度始终等于第一个sibling-1的高度。如果sibling-2的高度大于sibling-1的高度，则会溢出flex div并可滚动。
有没有办法使用Flexbox来实现这个效果？
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
是的，这是可能的。保留兄弟节点设置的最大高度，将其他节点的
flex-basis: 0和flex-grow: 1设置为，根据规范，它们会扩展到与兄弟节点相同的高度。没有绝对定位。没有在任何元素上设置高度。main { display: flex; } section { display: flex; flex-direction: column; width: 7em; border: thin solid black; margin: 1em; } :not(.limiter)>div { flex-basis: 0px; flex-grow: 1; overflow-y: auto; }<main> <section> <div>我更长，会滚动溢出。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中 在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在</div> </section> <section class="limiter"> <div>每个父节点的兄弟节点与我的高度相匹配。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中</div> </section> <section> <div>我虽然较短，但仍然与高度相匹配。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中</div> </section> </main>