title: Set flexbox children to have different heights to use up available space
body: <p>Using a two-column flexbox layout, how can different-sized children be made to fill all available space, instead of all children having the height of the tallest child of the row?</p>
  
  <p>I set up a demo on <a href="http://jsbin.com/ADIbatAZ/1/edit">jsbin</a> that illustrates the problem. I'd like for all the children to be the size of their wrapped contents.</p>
  
  <pre><code>#container {
  
   width: 800px;
    display: flex;
    flex-wrap: wrap;
  }
  
  .cell {
    width: 300px;
    flex; 1 auto;
  }
  
  
  &lt;div id="container"&gt;
  
  &lt;div class="cell"&gt;
  Cells with arbitrarily long content.&lt;/div&gt;
  
  &lt;div class="cell"&gt;
  &lt;/div&gt;
  
  &lt;div class="cell"&gt;
  &lt;/div&gt;
  
  &lt;div class="cell"&gt;
  &lt;/div&gt;
  
  &lt;div class="cell"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>