css - 嵌套的 flex 盒在不同浏览器中的工作方式不同

Question

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

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

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

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

谁知道如何在 Chrome 中也拉伸(stretch)内容？可能缺少特定的 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>

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>