Css 嵌套FlexBox在不同浏览器中的工作方式不同

我有一个嵌套flexbox设置的小示例：

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

• CSS“box”类使用flexbox属性，只有boxContent被告知在该属性上增长。对于特定的CSS属性和值，请检查fiddle
• “fullSize”仅将宽度和高度设置为100%

当你用Firefox和Chrome来检查这个问题时，你会得到不同的结果。在Firefox中，它做了我认为它必须做的事情，那就是扩展内部的.boxContent。然而，在Chrome中，内部的.boxContent不会被拉伸

有人知道如何在Chrome中扩展内容吗？可能缺少特定的webkit属性

.fullSize{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.盒子{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-网络工具包盒方向：垂直；
-莫兹盒方向：垂直；
-ms-flex方向：列；
-webkit柔性方向：列；
弯曲方向：立柱；
背景颜色：棕色；
}
/*第7行，../../app/styles/_layout.scss*/
.boxHeader{
-ms-flex:0自动；
-webkit flex:0 0自动；
flex:0自动；
背景颜色：绿色；
}
/*第12行，../../app/styles/_layout.scss*/
.boxContent{
-ms-flex:10自动；
-webkit flex:10自动；
弹性：10自动；
-webkit-box-flex:1.0；
背景颜色：黄色；
}
/*第18行，../../app/styles/_layout.scss*/
.boxFooter{
-ms-flex:01自动；
-webkit flex:0 1自动；
flex:01自动；
背景颜色：矢车菊蓝；
}
莫尔布鲁先生{
背景颜色：蓝色；
}
莫格林先生{
背景色：暗绿色；
}
瑞德先生{
背景色：红色；
}

标题
内割台
内容
内页脚
页脚

除非您需要额外的div，否则请将其删除。有时，图元的高度与其沿主轴（柱方向）的长度之间存在差异，这会在此处引起一些混淆。基本上，它看起来比浏览器认为的要高，这就是为什么

height:100%

不能像您预期的那样工作（我不确定在这种情况下哪个行为是正确的）

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

标题
内割台
内容内容内容内容
内页脚
页脚

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

您需要将boxContent设置为相对位置，并将其包含框设置为绝对位置

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

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

以下是更新的JSFIDLE：

---

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

这个问题是针对一个特定的问题而提出的：如何使flex box中的嵌套元素填充整个高度？简单的回答是：

在孩子身上使用

display:flex

，避免

height:100%

。这是一本书

解释得很好（更多）：

根据flexbox规范，

align self:stretch

值（flex'd元素的默认值）仅更改元素的交叉尺寸属性（在本例中为高度）的使用值。但是，百分比是根据父对象的“交叉大小”属性的指定值计算的，而不是它的“已使用”值

是使嵌套FlexBox工作所需的CSS属性的最小值。我已经为专栏展示了它；如果在一行内执行此操作，请删除两个“flex direction:column”。[在这个简单的例子中，删除这些不会改变任何事情，因为每个flexbox只有一个子项。但一旦添加第二个子项，您将在一行或一列中工作。]

HTML:

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

#e2

中的两行代码——是让我在Safari中更复杂的情况起作用的本质

此外，如果有困难，第一步是删除嵌套元素中的所有“百分比”高度属性。这里，这意味着允许

#e1

具有

高度：100%

——这是在其父容器的上下文中，而不是flex容器。但是

#e2

和

#e3

不应声明

%

高度

如果嵌套元素的高度与其父元素的高度不相关（像素、ems、vh），那么就可以了。请注意，vh是有效的，因为它与窗口大小相关，而窗口大小不受嵌套flex容器（#e1，#e2）高度的影响。这样，浏览器就可以很容易地获得正确的计算逻辑

---

应要求。使用类名使其更简单

HTML:

---

这对我有用。在任何情况下都无法使包装器div伸展。摆脱了它，工作得很好。有点烦人。Thanx man，在我的例子中最好的解决方案，嵌套元素必须是内联块。div容器（flex）有行，行有两个元素/单元格。第一个元素是固定宽度，第二个元素是填充剩余宽度<代码>显示：第行的flex发挥了神奇的作用。有没有办法再添加一层嵌套（添加一个

e4

作为

e3

的子级）？是的，您可以任意深入。使所有“中间”级别的css与

e2

相同。为了简化此操作，请使用“类名”而不是“ID”。不知道我为什么用ID。我将编辑答案以显示。谢谢！使用该示例，我发现当使用角度组件时，主体元素ha

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

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

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

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;
}

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

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;
}