Flexbox - одинаковая высота на всех картах

Question

У меня есть контейнер для флексбокса с 3 карточками, и я пытаюсь понять, как сделать так, чтобы карточки были одинаковой высоты, но я не добился большого успеха (попытался изменить направление flex-direction: column;, которое не сработало).

Это должно быть дружественным к IE11.Надеюсь, я иду по правильному пути с тем, что у меня есть на данный момент (новичок в мире CSS).

Codepen: https://codepen.io/neilem/pen/dejmRQ

#container {
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-around;
  padding: 5% 5%;
}

.card {
  text-align: center;
  border: 1px solid black;
  width: 31.33333%;
  margin: 1%;
}

#container>.card>.card-image>img {
  display: block;
  width: 100%;
}

<section id="container">
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 1</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos, sit sale mollis ut. Per vocent laoreet democritum no, cu pri sumo omnesque. Et accommodare intellegebat qui. Vix ne mundi primis.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 2</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos</p>
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 3</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea</p>
    </div>
  </div>
</section>

Answer 1

Начальная настройка гибкого контейнера: align-items: stretch.Это то, что создает функцию столбцов равной высоты.

В вашем коде вы переопределяете это значение по умолчанию с помощью align-items: flex-start.Просто избавься от этого.

#container {
  background-color: white;
  display: flex;
}

.card {
  flex: 1 0 30%;
  text-align: center;
  border: 1px solid black;
  margin: 1%;
}

#container > .card > .card-image > img {
  width: 100%;
}

<section id="container">
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 1</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos, sit sale mollis ut. Per vocent laoreet democritum no, cu pri sumo omnesque. Et accommodare intellegebat qui. Vix ne mundi primis.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 2</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos</p>
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 3</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea</p>
    </div>
  </div>
</section>

пересмотренная кодовая ручка

Протестировано в Chrome, Firefox, Edge и IE11.

Answer 2

Мне не совсем понятно, что вы хотите, но если вы хотите, чтобы все карты были одинаковой (полной) высоты, просто измените контейнер

align-items: flex-start;

на

align-items: stretch;

В IE11 есть множество ошибок с flexbox, так что вы, вероятно, захотите убедиться, что ничего в вашем контенте не вызывает ничего.