Дочерние элементы div внутри flexbox с фиксированной высотой и автоматическим переполнением не устанавливают динамически его высоту

Question

.container {
  display: flex;
  height: 200px;
  overflow: auto;
  border: 1px solid #000
}

.child {
  padding: 10px;
}

.child:nth-child(odd) {
  background-color: #c1c1c1
}

.box {
  background-color: red;
  width: 75px;
  height: 75px;
}

<div class="container">
  <div class="child">
    <div class="box">
      Boxes
    </div>
    <div class="box">
      Boxes
    </div>
    <div class="box">
      Boxes
    </div>
    <div class="box">
      Boxes
    </div>
    <div class="box">
      Boxes
    </div>
  </div>
  <div class="child">
    <div class="box">
      Boxes
    </div>

  </div>
  <div class="child">
    <div class="box">
      Boxes
    </div>
    <div class="box">
      Boxes
    </div>
  </div>
</div>

Дочерние элементы div внутри flexbox не изменяются динамически при увеличении содержимого. PS родительский div имеет фиксированную высоту с переполнением auto.

Я хочу, чтобы высота была одинаковой для всех дочерних элементов, если высота любого дочернего элемента увеличивается. Пожалуйста, найдите код здесь: https://jsfiddle.net/v7tcar5n/3/

Answer 1

Вам нужно убрать высоту контейнера, тогда вы получите желаемый результат, потому что align-items: stretch flex по умолчанию.

.container{
display:flex;
overflow:auto;
border:1px solid #000;
}

С помощью 'stretch' элементы растягиваются, чтобы соответствовать контейнеру.