一个flex项设置兄弟的高度限制

问题描述

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

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可以执行。因此 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项设置兄弟的高度限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！