title: CSS Flex: How to get equal heights in flex rows
body: <p>I experience some difficulties in getting a flex layout with equal column heights. I have a container (<code>.row-container</code>) that contains some rows (<code>.flex-row</code>). These rows contain some content of different length. I want all rows to have equal height. As far as my flex understanding goes, I have to set <code>flex: display</code> and the <code>flex-direction</code> in the parent (<code>.row-container</code>) and <code>flex-grow: 1</code> in the children (<code>.flex-row</code>). However, the rows do not have equal height, see this <a href="https://jsfiddle.net/m0rs8bn4/" rel="nofollow noreferrer">jsfiddle</a>. Any ideas (and perhaps an explanation) on how to make this work?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.row-container {
    display: flex;
    flex-direction: column;
    height: 300px;
    width: 75%;
    border: 1px solid blue;
  }
  
  .flex-row {
    border: 1px solid black;
    flex-grow: 1;
    display: flex;
    background-color: yellow;
    align-items: center;
  }
  
  .col-wrapper {}
  
  .col-1,
  .col-2 {
    border: 1px solid green;
  }
  
  .col-right {
    padding-left: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="some-div"&gt;
    &lt;div class="row-container"&gt;
      &lt;div class="flex-row"&gt;
        &lt;div class="col-wrapper"&gt;
          &lt;div class="col-1"&gt;X&lt;/div&gt;
          &lt;div class="col-2"&gt;some content&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="flex-row"&gt;
        &lt;div class="col-wrapper"&gt;
          &lt;div class="col-1"&gt;XXX&lt;/div&gt;
          &lt;div class="col-2"&gt;some longer content&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="flex-row"&gt;
        &lt;div class="col-wrapper"&gt;
          &lt;div class="col-1"&gt;aa ab&lt;/div&gt;
          &lt;div class="col-2"&gt;Amet illo distinctio facilis blanditiis alias. Explicabo dolores asperiores ducimus aut officiis, vero? Accusantium in accusantium ipsa iusto velit? Quas nesciunt ipsam amet impedit adipisci odio Omnis nemo perspiciatis quibusdam&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(Note: In my application, I also do some "column flexing" in the <code>row-container</code>. This code is ommitted apart from the flex centering.)</p>