title: nested flex container not stretching to the remaining space
body: <p>I am trying to create a simple flexbox layout with nested containers.</p>
  
  <p>It works well when I have a single container and use the full width + height.</p>
  
  <p>The problem is to have nested container also using a <code>display: flex</code>, somehow the nested container does not use all the remaining space (It works only if they have a defined width/height).</p>
  
  <p><a href="http://i.stack.imgur.com/IJWpF.png" rel="nofollow">screenshot of the problem</a></p>
  
  <p><a href="https://jsfiddle.net/eL5uv2nL/" rel="nofollow">jsfiddle view of the problem</a></p>
  
  <pre><code>&lt;div class="flexbox-parent"&gt;
  &lt;div class="flexbox-item header"&gt;
      Header
  &lt;/div&gt;
  
  &lt;div class="flexbox-item fill-area content flexbox-item-grow"&gt;
      &lt;div class="fill-area-content flexbox-item-grow"&gt;
          &lt;div class="flexbox-parent"&gt;
              &lt;div class="flexbox-item header"&gt;
                  2nd layer header
              &lt;/div&gt;
              &lt;div class="flexbox-item fill-area content flexbox-item-grow"&gt;
                  &lt;div class="fill-area-content flexbox-item-grow"&gt;
                      &lt;strong&gt;How to make this section use all the remaining space? &lt;/strong&gt;&lt;br/&gt;
                      It should also overflow:auto if too much data.
                      &lt;br/&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="flexbox-item footer"&gt;
                  2nd layer Footer
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="flexbox-item footer"&gt;
      Footer
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>html, body
  {
    width: 100%;
    height: 100%;
  }
  
  .flexbox-parent
  {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
    background: rgba(255, 255, 255, .1);
  }
  
  .flexbox-item {padding: 8px;}
  .flexbox-item-grow {
    flex: 1; /* same as flex: 1 1 auto; */
  }
  
  .flexbox-item.header { background: rgba(255, 0, 0, .1);}
  .flexbox-item.footer { background: rgba(0, 255, 0, .1);}
  .flexbox-item.content{ background: rgba(0, 0, 255, .1);}
  
  .fill-area
  {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
  }
  .fill-area-content{  
    background: rgba(0, 0, 0, .3); 
    border: 1px solid #000000;
  
    /* Needed for when the area gets squished too far and there is content that can't be displayed */
    overflow: auto;
  }
  </code></pre>