title: CSS Flex fill available height dynamically (without height or position)
body: <p>How do I make CSS Flex fill the available height dynamically without specifying the <code>height</code> or <code>position</code> (static) properties?</p>
  
  <p>In the XHTML code below I need the light blue box to fill in the space down to the light red element.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Flex Vertical Fill Test&lt;/title&gt;
  &lt;style type="text/css"&gt;
  #e1, #e2 {float: left; width: 50%;}
  #e1 {background-color: #cff;}
  #e2 {background-color: #ffc;}
  #e3 {background-color: #fcf; clear: both;}
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="e1"&gt;
  &lt;div&gt;&lt;p&gt;Needs to use full available height.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="e2"&gt;
  &lt;p&gt;Automatically generates height from content.&lt;/p&gt;
  &lt;p&gt;Automatically generates height from content.&lt;/p&gt;
  &lt;p&gt;Automatically generates height from content.&lt;/p&gt;
  &lt;p&gt;Automatically generates height from content.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="e3"&gt;&lt;p&gt;Natural content below&lt;/p&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am testing this in Firefox <em>first</em>, then Chrome and IE.</p>