Как сделать так, чтобы два сложенных элемента имели одинаковую высоту

Question

Я делаю открытку.Карта имеет два сложенных деления.Верхняя часть карты имеет изображение, а нижняя часть - просто текст.Что мне делать, чтобы верхние и нижние делители имели одинаковую высоту?Я знаю, что могу определить высоту div в пикселях, но я не хочу этого делать, потому что я не знаю, сколько текста будет на других карточках.

.card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cardTop, .cardBottom {
  border: 1px solid;
}

img {
  display: block;
}

<div class="card">
  <div class="cardTop">
    <img src="https://placehold.it/200x100" alt="">
  </div>
  <div class="cardBottom">
    <p>text of the card goes here</p>
  </div>
</div>

Answer 1

Просто используйте стиль флекс-бокса следующим образом:

.card {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;

  padding: 5px;
  height: 15em; //chose what you want
  width: 15em;  //chose what you want
}

.card > div {
  flex: 1 1 50%;
  overflow: hidden;
}

Таким образом, ваши 2 элемента делятся на 50% высоты вашей глобальной высоты контейнера .card.

Я сделал быстрый пример онлайн: https://stackblitz.com/edit/angular-pechib