Html 在另一个Flexbox中对Flexbox的浏览器支持

我花了整整一天的时间来做这件事。 虽然我可以使用一个柔性箱，但当一个柔性箱包含另一个柔性箱时，这会成为一个麻烦

我试着按照这个问题的提示来做：

这有一点帮助，但不幸的是我仍然不在那里

更让人困惑的是，Safari和Chrome似乎显示的是完全不同的同一页面。这使得我更难理解我做错了什么

我想做的是，有一个外部flex框，带有标题和内容。该外部柔性箱应在内容内有另一个柔性箱，同样带有标题和内容

似乎位于内部flex box内容内部的表不属于内部flex box

html{
身高：100%；
}
身体{
保证金：0；
最小高度：100%；
身高：100%；
溢出：隐藏；
}
.outerFlexBox{
身高：100%；
显示器：flex；
显示：-webkit flex；/*用于Safari*/
弯曲方向：立柱；
溢出：隐藏；
-webkit flex方向：列；/*用于Safari*/
背景颜色：绿色；
边框：黑点；
}
.外接器{
边框：蓝点；
}
.外部内容{
弹性：1；
边框：红点；
溢出：隐藏；
}
.innerFlexBox{
身高：100%；
显示器：flex；
显示：-webkit flex；/*用于Safari*/
弯曲方向：立柱；
溢出：隐藏；
-webkit flex方向：列；/*用于Safari*/
背景颜色：黄色；
边框：黑色实心；
}
.innerHeader{
边框：蓝色实心；
}
.内部内容{
弹性：1；
边框：红色实心；
溢出：隐藏；
}
.我的桌子{
弹性：1；
身高：100%；
最小高度：100%；
宽度：100%；
溢出y：自动；
边框：灰色实心；
}

一些外部标题
一些外部内容

一些内部标题

一些内在内容

某些标题列
一些争吵
一些争吵
一些争吵
一些争吵
一些争吵
一些争吵

当使用Flexbox并充分利用其特性时，您将获得跨浏览器解决方案

这里的主要部分是降低所有

高度：100%

并利用Flebox growth属性，

flex grow

此外，我还制作了

outerContent

和

innerContent

flex容器，因此Flebox可以一路填充剩余的空间

注意，我已经在Chrome/Firefox/IE11/Edge上成功地测试了这一点

堆栈片段

html，正文{
保证金：0；
}
身体{
显示：flex；/*IE11修复程序*/
}
.outerFlexBox{
flex:1；/*IE11修复*/
最小高度：100vh；
显示：-webkit flex；
/*狩猎旅行*/
-webkit柔性方向：列；
/*狩猎旅行*/
显示器：flex；
弯曲方向：立柱；
背景颜色：绿色；
边框：黑点；
}
.外接器{
边框：蓝点；
}
.外部内容{
柔性生长：1；
边框：红点；
显示：-webkit flex；
/*狩猎旅行*/
-webkit柔性方向：列；
/*狩猎旅行*/
显示器：flex；
弯曲方向：立柱；
}
.innerFlexBox{
柔性生长：1；
显示：-webkit flex；
/*狩猎旅行*/
-webkit柔性方向：列；
/*狩猎旅行*/
显示器：flex；
弯曲方向：立柱；
背景颜色：黄色；
边框：黑色实心；
}
.innerHeader{
边框：蓝色实心；
}
.内部内容{
柔性生长：1；
边框：红色实心；
显示：-webkit flex；
/*狩猎旅行*/
-webkit柔性方向：列；
/*狩猎旅行*/
显示器：flex；
弯曲方向：立柱；
}
.我的桌子{
柔性生长：1；
宽度：100%；
边框：灰色实心；
}

一些外部标题
一些外部内容

一些内部标题

一些内在内容

某些标题列
一些争吵
一些争吵
一些争吵
一些争吵
一些争吵
一些争吵

我以前在Safari中被嵌套的FlexBox咬过，尤其是

flex direction:column

。这可能值得一看：它们现在在Safari和Chrome上看起来都一样。谢谢你，艾格森！我有点困惑，为什么innerFlexBox仍然不包含innerContent。看起来innerFlexBox只包含innerHeader。如果查看边框和背景色，则innerFlexBox中的黄色背景色和黑色实心边框仅围绕innerHeader。innerContent具有来自outerFlexBox的绿色背景色。此外，innerContent的红色实心边框似乎位于outerContent容器的内部。这有意义吗？@Hans

innerFlexBox

和

innerContent

是兄弟，因此

innerFlexBox

不能包含

innerContent

，但

innerHeader

是

innerFlexBox

的子项，因此包含在它里面。@Hans并且由于

innerContent

和

innerFleBox

是兄弟，它们都是

outerContent

的弹性项（子项），感谢您向我指出这一点。我怎么会错过那个。。。我已经将innerContent移动到innerHeader的正下方，现在，它几乎完美无瑕，满足了我的需求。现在唯一让我感到困扰的是，innerFlexBox没有使用outerContent容器的完整高度