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

Question

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

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

CSS 'box' 类使用 flexbox 属性，只有 boxContent 被告知增长。对于特定的 CSS 属性和值，请检查 fiddle。
'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>

score 21 · Accepted Answer

除非您需要额外的 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>

score 14 · Accepted Answer

这个问题已经链接到一个特定的问题：如何使 flex box 中的嵌套元素填充整个高度？简短的回答是：

用display:flex在孩子身上并避免height:100%。这是关于 codepen 的简化示例。

CourtDemone解释得很好（更多在这里）：

根据 flexbox 规范，一个align-self:stretch值（flex'd 元素的默认值）仅更改元素的 cross-size 属性（在本例中为 height）的使用值。然而，百分比是根据父级的 cross-size 属性的指定值计算的，而不是它的使用值。

score 4 · Accepted Answer

我找到了一个解决方案而不删除额外的 div。

您需要使 boxContent 相对定位，并将其包含的框设为绝对。

将一个额外的 css 类附加到内部 div：

<div class="boxContent">
    <div class="box fullSize innerBox">

和以下CSS：

.boxContent {
  ...
    position: relative;
}
.innerBox{
    position: absolute;
    top: 0px;
    bottom: 0px;
}

这是更新的 jsfiddle：http: //jsfiddle.net/MUrPj/223/

这个问题已经很老了，但这可能对未来的访问者有帮助

score 2 · Accepted Answer

这个 JsFiddle是让嵌套的 flexbox 工作所需的最低 CSS 属性。我已经为column展示了它；如果您在一行中执行此操作，请删除两个“flex-direction：column”。[在这个简单的例子中，删除它们不会改变任何东西，因为每个 flexbox 只有一个孩子。但是一旦你添加了第二个孩子，你就会在一行或一列中工作。]

HTML：

<div id="e1">
  <div id="e2">
    <div id="e3">    
    </div>
  </div>
</div>

CSS：

html, body, #e1 {
  height: 100%; width: 100%;
}
#e1 {
  background-color: #ff0000;
  display: flex;
  flex-direction: column;
}
#e2 {
  background-color: #ffff00;
  /* Won't work if remove either of the next 2 lines - a box collapses. */
  flex: 1;
  display: flex;
  flex-direction: column;
}
#e3 {
  background-color: #00ff00;
  flex: 1;
}

根据我的经验，Safari 13（MacOS 和 iOS）比 Chrome 77、Firefox 69 甚至 Edge 18 更挑剔（重新嵌套的 flex 项目）。
虽然在这个简单的例子中，所有 3 个反应相同，但我有一个更复杂的除了 Safari 之外的所有情况。尽管如此，这里显示的代码——尤其是#e2“如果删除接下来的两行中的任何一行都不起作用”之后的两行——是使我在 Safari 中工作的更复杂情况的本质。

此外，如果遇到困难，第一步是删除嵌套元素中的所有“百分比”高度属性。在这里，这意味着#e1允许拥有height: 100%——这是在其父级的上下文中，而不是弹性容器。但是#e2，不#e3应该宣布高度。%

AFAIK，嵌套元素的高度与其父级（像素，ems，vh）无关。请注意 vh 有效，因为它与窗口大小有关，不受嵌套弹性容器（#e1，#e2）高度的影响。这样计算逻辑很容易让浏览器正确。

根据要求，嵌套四个深度的示例。使用类名使其更容易。

HTML：

<div class="fb-outer">
  <div class="fb-middle">
    <div class="fb-middle">
      <div class="fb-inner">    
      </div>
    </div>
  </div>
</div>

CSS：

html, body, .fb-outer {
  height: 100%; width: 100%;
}
.fb-outer {
  background-color: #ff0000;
  display: flex;
  flex-direction: column;
}
.fb-middle {
  background-color: #ffff00;
  /* Won't work if remove either of the next 2 lines. */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fb-inner {
  background-color: #00ff00;
  flex: 1;
}

score 0 · Accepted Answer

*,*::before,*::after {
margin:0;
padding:0;
box-sizing:border-box;

}
body {
width:100%;
height:100vh;
background-color:purple;
}

.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 {
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 {
  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">
                <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>
    <div class="boxFooter">FOOTER</div>
</div>

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

5 回答 5

Related

Reference