title: Bootstrap flex containers equal height for children
body: <p>I am trying to rewrite html table to bootstrap flex divs.</p>
  
  <p>Stack on how to keep the same height of logical child elements of containers?</p>
  
  <p><a href="https://jsfiddle.net/48qdk3r5/1/" rel="nofollow noreferrer">https://jsfiddle.net/48qdk3r5/1/</a></p>
  
  <p>It looks some buggy behaviour then I try set up .content height to 100%, the next row of elements overflows first row.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;
        &lt;div class="header"&gt;
          &lt;h2&gt;Header&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="content d-flex"&gt;
          &lt;div class="text-center w-50"&gt;
            &lt;h3&gt;Sub1&lt;/h3&gt;
            &lt;p&gt;Iam sub 1.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="text-center w-50"&gt;
            &lt;h3&gt;Sub2&lt;/h3&gt;
            &lt;p&gt;Iam sub 2.&lt;/p&gt;
            &lt;p&gt;Iam sub 2.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col"&gt;
        &lt;div class="header"&gt;
          &lt;h2&gt;Header3&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="text-center content"&gt;
            &lt;h3&gt;Sub3&lt;/h3&gt;
            &lt;p&gt;Iam sub 3.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;!--end first row --&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;
        &lt;div class="header"&gt;
          &lt;h2&gt;Header&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="content d-flex"&gt;
          &lt;div class="text-center w-50"&gt;
            &lt;h3&gt;Sub1&lt;/h3&gt;
            &lt;p&gt;Iam sub 1.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="text-center w-50"&gt;
            &lt;h3&gt;Sub2&lt;/h3&gt;
            &lt;p&gt;Iam sub 2.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col"&gt;
        &lt;div class="header"&gt;
          &lt;h2&gt;Header3&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="text-center content"&gt;
            &lt;h3&gt;Sub3&lt;/h3&gt;
            &lt;p&gt;Iam sub 3.&lt;/p&gt;
            &lt;p&gt;Iam sub 3.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;```
  
  I expect all elements of row to be the same height.
  </code></pre>