Bootstrap flex контейнеры для детей одинаковой высоты

Question

Я пытаюсь переписать HTML-таблицу для начальной загрузки flex-дивов.

Как сохранить одинаковую высоту логических дочерних элементов контейнеров?

https://jsfiddle.net/48qdk3r5/1/

Это выглядит некорректно, затем я пытаюсь установить .content height на 100%, следующий ряд элементов переполняет первый ряд.

<div class="container">
  <div class="row">
    <div class="col">
      <div class="header">
        <h2>Header</h2>
      </div>
      <div class="content d-flex">
        <div class="text-center w-50">
          <h3>Sub1</h3>
          <p>Iam sub 1.</p>
        </div>
        <div class="text-center w-50">
          <h3>Sub2</h3>
          <p>Iam sub 2.</p>
          <p>Iam sub 2.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="header">
        <h2>Header3</h2>
      </div>
      <div class="text-center content">
          <h3>Sub3</h3>
          <p>Iam sub 3.</p>
      </div>
    </div>
  </div>
<!--end first row -->

  <div class="row">
    <div class="col">
      <div class="header">
        <h2>Header</h2>
      </div>
      <div class="content d-flex">
        <div class="text-center w-50">
          <h3>Sub1</h3>
          <p>Iam sub 1.</p>
        </div>
        <div class="text-center w-50">
          <h3>Sub2</h3>
          <p>Iam sub 2.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="header">
        <h2>Header3</h2>
      </div>
      <div class="text-center content">
          <h3>Sub3</h3>
          <p>Iam sub 3.</p>
          <p>Iam sub 3.</p>
      </div>
    </div>
  </div>
</div>```

I expect all elements of row to be the same height.

Answer 1

Вы можете достичь равных высот, сделав свои .cols flexbbox-а также и flex-grow для блоков .content:

.col{
  display: flex;
  flex-flow: column;
}
.col .content{
  flex-grow: 1;
}

Смотрите это обновленное jsFiddle: https://jsfiddle.net/t29ph10d/