Равен максимуму div-контейнеров в карточках

Question

Мне нужно сделать карты одинаковой высоты. Я не имею в виду саму карту, я имею в виду контейнеры на картах.

Мой код выглядит так

.card-text {
  border: 1px solid lightgrey;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="card-group">
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla<br><br>bla </div>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla bla </div>
        </div>
      </div>
    </div>
  </div>

У кого-нибудь есть решение, как сделать текст карты равным по высоте?

Answer 1

.card-text {
  border: 1px solid lightgrey;
}

.card {
  height: 100%
}

.card-body {
  display: flex;
  flex-flow: column; 
}

.card-text {
  flex-grow: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="card-group">
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla<br><br>bla </div>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla bla </div>
        </div>
      </div>
    </div>
  </div>

Answer 2

Почему не использовать .card-deck вместо .card-group? Нравится: http://getbootstrap.com/docs/4.1/components/card/#card-decks Это сделано для того, чтобы иметь разные карты, все с одинаковой высотой. Они также расширят окружающий элемент .row.

Answer 3

Для этого вы можете использовать flexbox и свойство align-items. Посмотреть это

.card-group {
  display: flex;
  align-items: stretch;
}
.card {
  height: 100%;
  border: 1px solid black
}

https://codepen.io/moisesnandres/pen/dqVzGE