title: Vertically centering content within a space-filling flex box
body: <p>I'm trying to vertically center the content within two flex boxes in a column layout.</p>
  
  <p>I have created a simplified <strong><a href="http://jsfiddle.net/redders6600/bHNC9/" rel="nofollow">Fiddle</a></strong> to demonstrate.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id='container'&gt;
      &lt;div id= "top"&gt;
          some content!
      &lt;/div&gt;
      &lt;div id= "bottom"&gt;
          some content!
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container{
      display: -webkit-flex;
      width:100%;
      height:300px;
      -webkit-flex-direction: column;
      -webkit-justify-content: space-around;
      background-color: gray;
  }
  #container div{
      text-align:center;
      background-color:red;
      //-webkit-flex: 1; //uncomment to see 2nd option
      //vertical-align: middle; //doesn't work
  }
  </code></pre>
  
  <p>I want the inner DIVs to stretch vertically to fill the remaining space. I can do this by un-commenting the flex value, <em>but</em> when I do that the content is aligned to the top. I tried vertical-align but this didn't work (I didn't expect it to!)...</p>
  
  <p>Because my application with this has a container with dynamic height, I can't use fixed margins or padding to sort this problem.</p>
  
  <p>Is there a way to do this? Perhaps I have to make the inner divs themselves flex containers, but this seems a bit messy..</p>