Question

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

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

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

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

当您检查Firefox和Chrome的这个小提琴时，您会得到不同的结果。在Firefox中它做了我想它必须做的事情，这是拉伸内部.boxContent。但是在Chrome中，内部.boxContent不会被拉伸。

是否有人知道如何在Chrome中制作内容？也许是一个缺少的特定webkit属性？

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>

Answer 2

此问题已针对特定问题进行了链接：如何使弹性框中的嵌套元素填充整个高度？简短回答是：

对孩子使用display:flex并避免height:100%。这是simplified example on codepen。

CourtDemone解释得很好（更多here）：

根据flexbox规范，align-self:stretch值（flex＆＃39; d元素的默认值）仅更改元素交叉大小的使用值属性（在这种情况下，高度）。但是，百分比是根据父级的交叉大小属性的指定的值计算的，而不是它的使用值。

Answer 3

我找到了一个没有删除extra-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/

这个问题相当陈旧，但这可能会对将来的访问者有所帮助

Answer 4

This JsFiddle是使嵌套flexbox正常工作所需的最低CSS属性。我已经为列显示了它；如果要在行中执行此操作，请删除两个“弹性方向：列”。 [在这个简单的示例中，删除这些内容不会有任何改变，因为每个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中起作用的本质。 / p>

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

具有与父级不相关的高度的嵌套元素（像素，ems，vh）很好，AFAIK。请注意，vh有效，因为它与窗口大小有关，不受嵌套flex容器（＃e1，＃e2）高度的影响。这样浏览器就可以轻松地计算出正确的逻辑。

根据要求，example of nesting four deep。使用类名使其更容易。

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

如何使嵌套的flexbox工作

4 个答案: