Установите столбцы одинаковой высоты, используя flexbox

Question

Я знаю решение для создания столбцов равной высоты, используя display:table, например:

.row {
    display: table;
    width: 100%;
}

.col{
    display: table-cell; 
}

, но мой случай немного другой, так как я использую flexbox, а класс строки имеет display:flex:

.row {
  display: flex;
  display: ms-flex;
  flex-wrap: wrap;
}

и все столбцы имеют класс .large-4:

.large-4 {
   width: 25%;
   max-width: 25%;
  flex: 0 0 30%;
}

Я также не могу использовать flex:1 для .large-4, потому что он варьируется в разных окнах просмотра. вот фрагмент html:

<div class="row">
  <div class="large-4">
    <div class="card">
      <img src="https://picsum.photos/200/200" alt="author">
      <div class="card-content">
        <h1 class="card-title">Title</h1>
        <p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste
          distinctio
          optio vel aliquam provident, ipsa reprehenderit in corrupti quia ratione quisquam amet veniam totam
          veritatis.
        </p>
      </div>
    </div>
  </div>
  <div class="large-4">
    <div class="card">
      <img src="https://picsum.photos/200/200" alt="author">
      <div class="card-content">
        <h1 class="card-title">Title</h1>
        <p class="grey-text mgb-0">2012-09-05, by Basir Payenda</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        </p>
      </div>
    </div>
  </div>
  <div class="large-4">
    <div class="card">
      <img src="https://picsum.photos/200/200" alt="author">
      <div class="card-content">
        <h1 class="card-title">Title</h1>
        <p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste
          distinctio.
        </p>
      </div>
    </div>
  </div>
</div>

ссылка на кодовое перо можно найти здесь ! Как получить столбцы одинаковой высоты, используя flexbox? или любое другое лучшее решение. спасибо

Answer 1

Вам необходимо добавить display: flex к элементу .large-4:

.large-4 {
   width: 25%;
   max-width: 25%;
   flex: 0 0 30%;
   display: flex;
}

Вы заметите, что при проверке своих элементов с помощью инструмента инспектора элементы large-4 фактически имеют одинаковую высоту. , Это содержание внутри, которого нет. Поэтому, делая гибкий элемент родительского элемента, он заставит дочерние элементы заполнить пространство.

Answer 2

У вас уже есть столбцы одинаковой высоты, но внутри них находится контейнер, сжимающийся по своему содержимому. Разверните этот контейнер.

.card {
    height: 100%;
}