title: CSS height issue with flex box inside flex box
body: <p>I am having a problem with flex boxes contained inside flex boxes. The JS Fiddle at <a href="http://jsfiddle.net/fr077nn2/" rel="nofollow noreferrer">http://jsfiddle.net/fr077nn2/</a> contains the following code:</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>    #container{
        position: absolute;
        height: 100%;
        width: 100%;
        border: 3px solid yellow;
      }
      .app {
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 3px solid black;
      }
      .app-header {
        border: 3px solid red;
      }
      .app-content {
        border: 3px solid green;
        flex: 1;
        overflow: hidden;
      }
      .app-footer {
        border: 3px solid blue;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;div id="container"&gt;
        &lt;div class="app"&gt;
          &lt;div class="app-header"&gt;HEADER1&lt;/div&gt;
          &lt;div class="app-content"&gt;
            &lt;div class="app"&gt;
              &lt;div class="app-header"&gt;HEADER2&lt;/div&gt;
              &lt;div class="app-content"&gt;CONTENT2&lt;/div&gt;
              &lt;div class="app-footer"&gt;FOOTER2&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="app-footer"&gt;FOOTER1&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to get the .app-content DIVs fill up the remaining space of the parent .app DIV. It works well for the outer boxes, as shown in the fiddle. However, for the inner boxes, CONTENT2 is not filling the remaining space. I suspect that height:100% does not work in that case because the height of the parent DIV is not properly known... any suggestion how to achieve the above properly?</p>
  
  <p><strong>Edit:</strong> Works fine on Firefox as expected not on Chrome.</p>