CSS height issue with flex box inside flex box

Question

I am having a problem with flex boxes contained inside flex boxes. The JS Fiddle at http://jsfiddle.net/fr077nn2/ contains the following 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;
    }

   <div id="container">
      <div class="app">
        <div class="app-header">HEADER1</div>
        <div class="app-content">
          <div class="app">
            <div class="app-header">HEADER2</div>
            <div class="app-content">CONTENT2</div>
            <div class="app-footer">FOOTER2</div>
          </div>
        </div>
        <div class="app-footer">FOOTER1</div>
      </div>
    </div>

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?

Edit: Works fine on Firefox as expected not on Chrome.

Answer 1

Generally speaking, 100% height works when the parent has a well defined height. In your example, the outermost app-content does not have an explicit height which is why 100% height on its child does not work.

A simple workaround is to use relative-absolute positioning to size the child:

#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;
  /* added property */
  position: relative;
}
.app-footer {
  border: 3px solid blue;
}
/* added rule */
.app-content > .app {
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
/* scrollbar and border correction */
body {
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
}

<div id="container">
  <div class="app">
    <div class="app-header">HEADER1</div>
    <div class="app-content">
      <div class="app">
        <div class="app-header">HEADER2</div>
        <div class="app-content">CONTENT2</div>
        <div class="app-footer">FOOTER2</div>
      </div>
    </div>
    <div class="app-footer">FOOTER1</div>
  </div>
</div>

Answer 2

Not sure if this is OK / fit your needs, but at least it is flexing in Chrome + FF ;P Perhaps a nesting issue.

Flex on container + flex on content:

http://jsfiddle.net/fr077nn2/2/

#container{
  position: absolute;
  height: 100%;
  width: 100%;
  border: 3px solid yellow;
  display: flex;
  flex-direction: column;
}
.app {
  display: flex;
  flex-direction: column;
  border: 3px solid black;
  flex-grow: 1;
}
.app-header {
  border: 3px solid red;
}
.app-content {
  border: 3px solid green;
  overflow: hidden;
  flex-grow: 1;
  display: flex;
}
.app-footer {
  border: 3px solid blue;
}