html - 一个 flex 元素设置了 sibling 的高度限制

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

<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做到这一点？

最佳答案

有什么方法可以通过Flexbox做到这一点？


基本上没有等高弯曲功能基于容器的高度，而不是任何特定的同级。

因此sibling-1和sibling-2可以始终相等。

但是flexbox没有内置机制将项目的高度限制为一个同级的高度。

考虑JavaScript或CSS定位属性。

这是使用绝对定位的示例：

.flex {
  display: flex;
  width: 200px;
  position: relative;
}

.flex>div {
  flex: 0 0 50%;
  border: 1px solid black;
  box-sizing: border-box;
}

.sibling-2 {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
}

<div class="flex">
  <div class="sibling-1">text<br>text<br>text<br>text<br>text<br>text<br></div>
  <div class="sibling-2">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
</div>

jsFiddle