title: Flexbox evenly sized elements regardless of contents
body: <h1>How to size each square the same???</h1>
  
  <p><a href="http://output.jsbin.com/nurumi/1/quiet" rel="noreferrer">Preview Issue on JSBIN</a> | <a href="http://jsbin.com/nurumi/1/edit?html,css" rel="noreferrer">View Issue Code on JSBIN</a></p>
  
  <p>I am using <strong>flexbox</strong> to create a grid layout.  Most grid cells do not have content and some grid cells do have content.  When a cell has content it throws everything off.  <strong>how can I make sure all cells are even regardless of content?</strong></p>
  
  <p><a href="https://i.stack.imgur.com/slELk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/slELk.png" alt="Not sized correctly"></a></p>
  
  <h3>HTML</h3>
  
  <p>I have three rows, each with three cells.  Only the center row of the center cell contains children.</p>
  
  <pre><code>&lt;div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;span&gt;contains span&lt;/span&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <p>In the css the center space is larger than the other squares.</p>
  
  <pre><code>body, html {
    height: 100%;
  }
  
  body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  
  body&gt;div {
    display: flex;
  }
  
  body&gt;div&gt;div {
    border: solid 1px blue;
  }
  
  div {
    flex-grow: 1;
  }
  
  body&gt;div:nth-child(2)&gt;div:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  </code></pre>