嵌套的弹性盒在不同浏览器中的工作方式不同

Question

我有一个嵌套 flexbox 设置的小例子：http: //jsfiddle.net/ThomasSpiessens/MUrPj/12/

在此示例中，以下内容适用：

• CSS ‘box’ 类使用 flexbox 属性，只有 boxContent 被告知增长。对于特定的 CSS 属性和值，请查看小提琴。
• ‘fullSize’ 只是将宽度和高度都设置为 100%。

当您使用 Firefox 和 Chrome 检查这个小提琴时，您会得到不同的结果。在 Firefox 中，它执行我认为它必须执行的操作，即拉伸内部 .boxContent。然而，在 Chrome 中，内部 .boxContent 不会被拉伸。

有谁知道如何在 Chrome 中也扩展内容吗？也许缺少特定的 webkit 属性？

 .fullSize {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  background-color: brown;
}

/* line 7, ../../app/styles/_layout.scss */

.boxHeader {
  -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  background-color: green;
}

/* line 12, ../../app/styles/_layout.scss */

.boxContent {
  -ms-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-box-flex: 1.0;
  background-color: yellow;
}

/* line 18, ../../app/styles/_layout.scss */

.boxFooter {
  -ms-flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  background-color: cornflowerblue;
}

.moreblue {
  background-color: blue;
}

.moregreen {
  background-color: darkgreen;
}

.red {
  background-color: red;
}

 <div class="box fullSize">
  <div class="boxHeader">HEADER</div>
  <div class="boxContent">
    <div class="box fullSize">
      <div class="boxHeader moregreen">INNER HEADER</div>
      <div class="boxContent red">CONTENT CONTENT CONTENT</div>
      <div class="boxFooter moreblue">INNER FOOTER</div>
    </div>
  </div>
  <div class="boxFooter">FOOTER</div>
</div>

原文由 Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

除非您 需要 那个额外的 div，否则请将其删除。有时元素的高度与其沿 _主轴_（列方向）的长度之间存在差异，这会在这里造成一些混乱。基本上，它 看起来 比浏览器认为的要高，这就是为什么 height: 100% 不能像你期望的那样工作（我不确定在这种情况下哪种行为是正确的）。

无论出于何种原因，将元素提升到 flex 容器 都是可行的。

http://jsfiddle.net/MUrPj/14/

 <div class="box fullSize">
    <div class="boxHeader">HEADER</div>
    <div class="boxContent box">
        <div class="boxHeader moregreen">INNER HEADER</div>
        <div class="boxContent red">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>
        <div class="boxFooter moreblue">INNER FOOTER</div>
    </div>
    <div class="boxFooter">FOOTER</div>
</div>

原文由 cimmanon 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这个问题已经链接到一个特定的问题： How to make nested elements in a flex box fill the whole height? 简短的回答是：

对孩子使用 display:flex 并避免 height:100% 。这是 codepen 上的一个简化示例。

CourtDemone 解释得很好（更多信息请 点击此处）：

根据 flexbox 规范， align-self:stretch 值（flex’d 元素的默认值）仅更改元素的横向尺寸属性（在本例中为高度）的 使用 值。然而，百分比是根据父级的横向尺寸属性的 指定 值计算的，而不是它的使用值。

原文由 ldwg 发布，翻译遵循 CC BY-SA 3.0 许可协议