title: Flexbox inside another flexbox?
body: <p>I'm trying to get a flexbox working inside a flexbox. While the first (wrapping) flexbox works, the one inside does nothing. Is there anyway to get this to work? </p>
  
  <p>What I'm looking to do is effectively have two sticky footers and have the height of both reach the the footers.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    height: 100%;
    margin: 0; padding: 0;  /* to avoid scrollbars */
  }
  
  #wrapper {
    display: flex;  /* use the flex model */
    min-height: 100%;
    flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
  }
  
  #header {
    background: yellow;
    height: 100px;  /* can be variable as well */
    
  }
  
  #body {
    flex: 1;
    border: 1px solid orange;
    height: 100%:
  }
  #wrapper2 {
    display: flex;  /* use the flex model */
    min-height: 100%;
    flex-direction: column;
  }
  #body2 {
    border: 1px solid purple;
    flex: 1;
  }
  #footer2 {
    background: red;
    flex: 0;
  }
  
  #footer{
    background: lime;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;div id="body"&gt;Bodyof&lt;br/&gt;
      variable&lt;br/&gt;
      height&lt;br/&gt;
      &lt;div id="wrapper2"&gt;
      &lt;div id="body2"&gt;
      blah
      &lt;/div&gt;
      &lt;div id="footer2"&gt;
      blah&lt;br /&gt;
      blah
      &lt;/div&gt;    
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;div id="footer"&gt;
      Footer&lt;br/&gt;
      of&lt;br/&gt;
      variable&lt;br/&gt;
      height&lt;br/&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/Shixma/np3dnkk2/" rel="noreferrer">JS Fiddle</a></p>