嵌套的 flexboxes 跨浏览器的工作方式不同 [英] Nested flexboxes works differently across browsers

问题描述

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

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

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

当你用 Firefox 和 Chrome 检查这个 fiddle 时，你会得到不同的结果.在 Firefox 中，它做我认为必须做的事情，即拉伸内部 .boxContent.然而，在 Chrome 中，内部 .boxContent 不会被拉伸.

有谁知道如何在 Chrome 中拉伸内容?也许缺少特定的 webkit 属性?

.fullSize {宽度:100%；高度:100%；边距:0；填充:0；}.盒子 {显示:-webkit-box；显示:-moz-box；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；-webkit-box-orient:垂直；-moz-box-orient:垂直；-ms-flex-direction: 列；-webkit-flex-direction: 列；弹性方向:列；背景颜色:棕色；}/* 第 7 行，../../app/styles/_layout.scss */.boxHeader {-ms-flex:0 0 自动；-webkit-flex:0 0 自动；弹性:0 0 自动；背景颜色:绿色；}/* 第 12 行，../../app/styles/_layout.scss */.boxContent {-ms-flex:1 0 自动；-webkit-flex:1 0 自动；弹性:1 0 自动；-webkit-box-flex: 1.0;背景颜色:黄色；}/* 第 18 行，../../app/styles/_layout.scss */.boxFooter {-ms-flex:0 1 自动；-webkit-flex:0 1 自动；弹性:0 1 自动；背景颜色:矢车菊蓝；}.moreblue {背景颜色:蓝色；}.moregreen {背景颜色:深绿色；}.红色的 {背景颜色:红色；}

<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">内页脚</div>

<div class="boxFooter">FOOTER</div>

解决方案

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

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

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

<div class="boxHeader">HEADER</div><div class="boxContent box"><div class="boxHeader moregreen">INNER HEADER</div><div class="boxContent red">内容内容内容内容内容内容内容内容内容内容内容</div><div class="boxFooter moreblue">内页脚</div>
<div class="boxFooter">FOOTER</div>

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

In this example the following applies:

• CSS 'box' classes use flexbox properties on which only the boxContent is told to grow. For specific CSS properties and values, please check the fiddle.
• 'fullSize' just sets both width and height to 100%.

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.

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>

解决方案

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

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>

这篇关于嵌套的 flexboxes 跨浏览器的工作方式不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！