嵌套的Flexbox在不同的浏览器中的工作方式有所不同

问题描述：

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

I have a small example of a nested flexbox setup: http://jsfiddle.net/ThomasSpiessens/MUrPj/12/

在此示例中，适用以下条件:

In this example the following applies:

CSS'box'类使用flexbox属性，仅在该属性上告知boxContent增长.有关特定的CSS属性和值，请检查小提琴.
'fullSize'只是将宽度和高度都设置为100％.

当您在Firefox和Chrome上查看此小提琴时，您会得到不同的结果.在Firefox中，它可以执行我想做的事情，即扩展内部.boxContent.但是，在Chrome中，内部.boxContent不会被拉伸.

When you check this fiddle with Firefox and Chrome you get different results. In Firefox it does what I would suppose it has to do, which is stretching the inner .boxContent. In Chrome however, the inner .boxContent doesn't get stretched.

有人会知道如何在Chrome中扩展内容吗?也许缺少特定的Webkit属性?

Would anyone have an idea how to make the content stretch in Chrome as well ? perhaps a specific webkit property that is missing ?

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

答

除非您需要多余的div，否则将其删除.元素的高度与其沿主轴的长度(列方向)之间有时会有所不同，这在这里引起了一些混乱.基本上，它看起来比浏览器所认为的要高，这就是为什么height: 100%不能像您期望的那样工作的原因(我不确定在这种情况下哪种行为是正确的)

Unless you need that extra div, remove it. There is sometimes a difference between the height of an element and its length along the main axis (column orientation), which is causing some confusion here. Basically, it looks like it is taller than the browser believes it to be, which is why height: 100% doesn't work like you expect (I'm not certain which behavior is correct in this instance).

无论出于何种原因，都可以将元素提升为 flex容器.

For whatever reason, promoting the element to a flex container works.

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>

嵌套的Flexbox在不同的浏览器中的工作方式有所不同

相关推荐