我有两个同级元素,每个元素都包含动态内容。
<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