title: How to make a column flex have height: 100%?
body: <p>I'd like to make the following fill up the viewport vertically:</p>
  
  <p><a href="http://codepen.io/anon/pen/lkpKu" rel="nofollow">http://codepen.io/anon/pen/lkpKu</a></p>
  
  <p>However, applying <code>height: 100%</code> to the outer div doesn't work so long as it has <code>display: flex</code>.</p>
  
  <p>This was forked from:</p>
  
  <p><a href="http://codepen.io/chriscoyier/pen/qazmI" rel="nofollow">http://codepen.io/chriscoyier/pen/qazmI</a></p>
  
  <p>Which has no problem filling up the viewport horizontally.</p>
  
  <p>Any way to accomplish this?  I'd be open to seeing hacks, but ideally this doesn't require that I e.g. manually implement the same effect using Javascript (which I know how to do and am not asking about).</p>
  
  <p>I'm just interested in getting this working on the latest Chrome.</p>