Два гибких контейнера одинаковой ширины независимо от предметов

Question

Как создать два контейнера одинаковой ширины, даже если внутри одного из них много гибких элементов? Я мог бы добавить переполнение, скрытое для обоих контейнеров, но это скорее обходной путь, чем решение проблемы

<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;
}

Спасибо