一个flex项设置兄弟的高度限制 [英] One flex item sets the height limit for siblings

问题描述

我有两个兄弟元素，每个元素都包含动态内容。

I have two sibling elements which each contain dynamic content.

<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，因此可以滚动。

In some cases sibling-1 will have more content then sibling-2 and vice versa. I would like the height of the second element sibling-2 always equal the height of the first sibling-1. If the height of sibling-2 is greater then the height of sibling-1 it will overflow the flex div and thus be scrollable.

有任何方法可以用Flexbox完成这个任务吗？

Is there any way to accomplish this with Flexbox?

推荐答案

有任何方法可以使用Flexbox完成此操作吗？

Is there any way to accomplish this with Flexbox?

答案是否定的。

Flexbox可以执行等高列。因此 sibling-1 和 sibling-2 总是可以相等的高度。

Flexbox can do equal height columns. So sibling-1 and sibling-2 can always be equal height.

然而，flexbox没有提供一种机制，当它超过 sibling-1的高度时，允许 sibling-2 。考虑CSS定位属性或Javascript。

However, flexbox does not provide a mechanism that enables sibling-2 to limit its height when it exceeds the height of sibling-1. Consider CSS positioning properties or Javascript.

这篇关于一个flex项设置兄弟的高度限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！