title: Equal Height Columns - Flexbox & flex-wrap: wrap
body: <p>i'm working on a layout and I can't figure out how to get these columns to be equal height, specifically the green areas when the text wraps. Can you help?
  <a href="https://i.stack.imgur.com/bbDKj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bbDKj.png" alt="sandwich &amp; burgers is wrapping"></a></p>
  
  <p>My html template, with more .category-containers inside...</p>
  
  <pre><code>&lt;div class="flex-container"&gt;
    &lt;div class="category-container"&gt;
      &lt;a href="#" class="img-gallery-col medium-internal-page-static-image" style="background-image: url('http://placehold.it/800/800');"&gt;
      &lt;/a&gt;
      &lt;h4 class="text-center"&gt;Salads &amp;amp; Sides&lt;/h4&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My css for the flex-container is...</p>
  
  <pre><code>.flex-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  </code></pre>
  
  <p>Here's a coden link if that helps <a href="http://codepen.io/johnsonjpj/pen/evopaV?editors=1100" rel="nofollow noreferrer">http://codepen.io/johnsonjpj/pen/evopaV?editors=1100</a></p>
  
  <p><strong>EDIT:</strong> I have updated the pen and added a height to the category-container and also made it display: flex. Then I added flex-grow to the h4. How can I get it vertically center inside that green area?</p>