Заполнить содержимое div по высоте до значения max-height

Question

Помогите сообразить.

Есть контейнер, внутри которого три элемента list-item. Нужно заполнить list-item его содержимым по высоте таким образом, чтобы высота list-item заполнилась до значения max-height: 512px.

Иначе говоря, нужно чтобы list-item сохранял пропорции при масштабировании, исходя из начальных 384х512, а его содержимое заполняло всю область.

Пробовал через padding-bottom: 128.65% для элемента top, всё в принципе отлично, но только с фиксированным кол-вом элементов, а это не мой случай.

.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.list-item {
  background: #ccc;
  height: 100%;
  max-height: 512px;
}

.item-content {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}

.top {}

.mid {}

.bot {}

<div class="list">
  <div class="list-item">
    <div class="item-content">
      <div class="top">TOP</div>
      <div class="bot">BOTTOM</div>
    </div>
  </div>
  <div class="list-item">
    <div class="item-content">
      <div class="top">TOP</div>
      <div class="mid">MIDDLE</div>
      <div class="bot">BOTTOM</div>
    </div>
  </div>
  <div class="list-item">
    <div class="item-content">
      <div class="top">TOP</div>
      <div class="bot">BOTTOM</div>
    </div>
  </div>
</div>

Answer 1

Забыли задать высоту для .item-content

.item-content {
  height: 100%;
  // other properties
}

БЛОГ НА HUSL

Заполнить содержимое div по высоте до значения max-height

Ответы (1 шт):