html - 两个独立于元素的具有相同宽度的 flex 容器

Question

如何创建两个宽度相等的容器，即使其中一个容器中有很多 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;
}

https://jsfiddle.net/0e7n6g8b/

Answer 1

只需添加 flex-wrap:wrap;到你的容器 div。

.container {
  display: flex;
  flex-wrap:wrap;
}

谢谢