如何创建两个宽度相等的容器,即使其中一个容器中有很多 flex 元素?我可以将溢出隐藏到两个容器中,但这似乎是解决方法而不是问题的解决方案
<div class="parent">
<div class="child1">
blabla
</div>
<div class="child2">
<div class="container">
<div class="subcontainer">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="subcontainer">bbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="subcontainer">ccccccccccccccccccccccc</div>
<div class="subcontainer">dwadawdwdaadwawadawddwaw</div>
<div class="subcontainer">dddddddddddddddddddddddd</div>
<div class="subcontainer">eeeeeeeeeeeeeeeeeeeeeeee</div>
</div>
</div>
</div>
.parent {
display: flex;
}
.child1, .child2 {
flex: 1;
flex-basis: 50%;
/* overflow: hidden */
}
.container {
display: flex;
}
.child1 {
border: 1px solid red;
}
.child2 {
border: 1px solid green;
}
最佳答案
只需添加 flex-wrap:wrap;到你的容器 div。
.container {
display: flex;
flex-wrap:wrap;
}
谢谢
关于html - 两个独立于元素的具有相同宽度的 flex 容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58317499/