title: Set height of CSS flex elements to the same amount?
body: <p>I have 2 divs next to each other that I center vertically and horizontally using flex and justify-content/align-items.</p>
  
  <p>Example
  HTML:</p>
  
  <pre><code>&lt;div class="inner"&gt;
      &lt;div class="section green"&gt;
          &lt;img src="http://i.imgur.com/hEOMgVf.png"&gt;
      &lt;/div&gt;
      &lt;div class="section red"&gt;
           &lt;img src="http://i.imgur.com/nEybO1g.png"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.inner {
      float: left;
      width: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #343434;
      text-align: center;
  }
  .section {
      float: left;
      flex: 1;
  }
  
  .green { background-color: #7dc242; }
  .red { background-color: #ed1c24; }
  </code></pre>
  
  <p>My issue is that I need to set the height of both 'section' divs to the same as well as centering them vertically and horizontally. You can see in the JSFiddle below that the green background isn't the same height as the red. How can I make both divs the full height of the container div?</p>
  
  <p>Here's a simplified JSFiddle of what I have:
  <a href="http://jsfiddle.net/beK28/1/" rel="noreferrer">http://jsfiddle.net/beK28/1/</a></p>