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

<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-1sibling-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

10-06 16:20