title: flexbox four tile layout
body: <p>I want to create a flexbox-based 2x2 layout with four equal tiles. Here is a fiddle <a href="https://jsfiddle.net/1Lw5hge3/2/" rel="nofollow">https://jsfiddle.net/1Lw5hge3/2/</a> . 
  Initial 1x2 horizontal split worked fine, I set</p>
  
  <pre><code>.half
  {
       flex: 0 0 50%;
  }
  </code></pre>
  
  <p>which, as far as I understand, equals to 'do not grow or shrink, just set it to 50%'. it works fine, even if one of the tiles has no content.</p>
  
  <p>However when I tried the same approach for nested <code>quarter</code> tiles it didn't work. The content of each tile is different, it can be a background image or some text of variable height. When the <code>flex-grow</code> is set to 0, the tiles don't expand to full height at all, just the content height. When I set it to 1, they expand, but the proportions are not 50%, they are based on content (e.g. the tile with small quote and image, obviously the image tile has no initial height, so tile with quote is higher).</p>
  
  <p>Is there a way to properly set height for <code>quarter</code> tiles, regardless of content? I'm not sure how <code>half</code> is working, maybe something from <code>container</code> fixes it?</p>