title: How do I make a div stretch in a flexbox of dynamic height?
body: <p>I'm trying to make a stacked layout using flexbox.  Ideally it'd look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Mzbeu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Mzbeu.png" alt="2 boxes stacked vertically, the top is red and 4x the size of the bottom, which is blue"></a></p>
  
  <p>where the bottom (blue) div is a fixed height of <code>250px</code> and the top div is <code>n-250</code>, where <code>n</code> is the size of the parent container--in another words, the top should stretch to fill the container.</p>
  
  <p>I have some idea of how to do this when I have the container height, but I'd rather avoid having to determine that variable at runtime. </p>
  
  <p>This issue has been covered at length in various forms , but none seem to address this simple use-case (<a href="https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space">here</a>, for example, works with a header/content/footer, but ostensibly not with just content/footer).</p>
  
  <p>I've set up a <a href="http://codepen.io/brandonmp44/pen/xgbgPV" rel="noreferrer">codepen with the example</a>. </p>