弹性框内的弹性框的CSS高度问题

Question

我在柔性盒内包含柔性盒时遇到问题。位于http://jsfiddle.net/fr077nn2/的JS小提琴包含以下代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我试图让.app-content DIV填满父.app DIV的剩余空间。它适用于外盒，如小提琴所示。但是，对于内部框，CONTENT2未填充剩余空间。我怀疑高度：100％在这种情况下不起作用，因为父DIV的高度没有正确知道...任何建议如何正确实现上述目标？

修改：按照预期不在Chrome上正常使用Firefox。

Answer 1

一般来说，当父级具有明确定义的高度时，100％高度起作用。在您的示例中，最外层的app-content没有明确的高度，这就是为什么其子节点的100％高度不起作用的原因。

一个简单的解决方法是使用相对绝对定位来确定子项的大小：

#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

不确定这是否合适/适合您的需求，但至少它在Chrome + FF中屈服; P也许是一个嵌套问题。

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;
}

Answer 3

为什么不简化？

使用您当前的标记

这似乎是很多不必要的HTML。

您需要将flex完全嵌套。在此示例中，顶部弹性容器具有height: 100vh以占据视口的整个高度。一些弹性儿童也是弹性父母，他们得到display: flex和flex: 1，因此他们会成长和缩小，他们的孩子可以扩展。

实施例

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  border: 0;
}
div {
  box-sizing: border-box;
}
#container {
  height: 100vh;
  border: 3px solid yellow;
  display: flex;
}
.app {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 3px solid black;
}
.app-header {
  border: 3px solid red;
}
.app-content {
  border: 3px solid green;
  display: flex;
  flex: 1;
  overflow: hidden;
}
.app-footer {
  border: 3px solid blue;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

简化示例

我们可以大幅减少标记并消除嵌套弹性的需要。内容为flex: 1，并将展开以填充页眉和页脚留下的所有空间。

在这个例子中，body本身就是flex容器，可以用顶级div包装器代替。

＆＃13;

＆＃13;

* {
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  border: 3px solid black;
}
.app-header {
  border: 3px solid red;
}
.app-content {
  border: 3px solid green;
  flex: 1;
}
.app-footer {
  border: 3px solid blue;
}

＆＃13;

<div class="app-header">HEADER1</div>

<div class="app-header">HEADER2</div>

<div class="app-content">CONTENT2</div>

<div class="app-footer">FOOTER2</div>

<div class="app-footer">FOOTER1</div>

＆＃13;

＆＃13;

＆＃13;