title: Flexbox align-items: stretch not stretching low content div
body: <p>So I have 2 divs, side by side.</p>
  
  <p>Each div has a different background color.</p>
  
  <p>The first div has very little content.</p>
  
  <p>The second div has a lot of content.</p>
  
  <p>At certain screen resolutions the second div will overflow.</p>
  
  <p>I need the first content to stretch to the height of its neighbor.</p>
  
  <p>I thought flexbox align-items: stretch achieved this, but it doesn't appear to work.</p>
  
  <p>There is a working model here: <a href="http://codepen.io/mildrenben/pen/MwxeJv" rel="noreferrer">http://codepen.io/mildrenben/pen/MwxeJv</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
    &lt;div class="first"&gt;
      First div content
    &lt;/div&gt;
    &lt;div class="second"&gt;
       // A Ton of content
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html,
  body {
    width: 100%;
    min-height: 100%;
  }
  
  .wrap {
     height: 100%;
     display: flex;
     align-items: stretch;
  }
  
  .first,
  .second {
    height: 100%;
    width: 50%;
  }
  
  .first {
    background: green;
  }
  
  .second {
    background: blue;
  }
  </code></pre>