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

.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 не изменяются динамически при увеличении содержимого. P.S. родительский div имеет фиксированное право с автоматическим переполнением.

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


javascript html css flexbox css-grid
person Shavez Hameed    schedule 20.01.2020    source источник
comment
Вы спрашиваете, как получить динамическую высоту с фиксированной высотой. Вы не можете иметь оба, вам нужно выбрать один или другой.   -  person Caleb Anthony    schedule 20.01.2020
comment
рассмотрите вложенный контейнер, где вы применяете flexbox   -  person Temani Afif    schedule 20.01.2020
comment
Добавление вложенного контейнера сработало для меня. Спасибо :)   -  person Shavez Hameed    schedule 20.01.2020

Ответы (1)


arrow_upward
0
arrow_downward

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

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

При «растягивании» элементы растягиваются, чтобы соответствовать размеру контейнера.

person Or Ben-Yossef    schedule 20.01.2020
comment
но это требование, мне нужна высота и полоса прокрутки в контейнере. - person Shavez Hameed; 20.01.2020
comment
Это правильный ответ.... если у вас есть фиксированная высота, вы можете иметь динамическую высоту..... - person Sfili_81; 20.01.2020