CSS高度问题与flex box内部的flex box

Question

我有一个flex盒子里面的flex盒子的问题。http://jsfidle.net/fr077nn2/上的JS小提琴包含以下代码：

    #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>

我正在尝试让.app-content div填充父.app div的剩余空间。它适用于外箱，如小提琴所示。但是，对于内部的盒子来说，CONTENT2并没有填补剩余的空间。我怀疑height：100%在这种情况下不起作用，因为父DIV的高度不是正确知道的...有何建议如何适当地实现上述目标？

编辑：在Firefox上运行良好，不像预期的那样在Chrome上运行。

Answer 1

一般来说，当父级有一个很好定义的高度时，100%的高度起作用。在您的示例中，最外面的app-content没有显式的高度，这就是为什么其子级的100%高度不起作用的原因。

一个简单的解决方法是使用相对-绝对定位来调整子级的大小：

css lang-css prettyprint-override">#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>