嵌套的CSS3 FlexBox不工作

FlexBox可以嵌套吗？我将水平flexbox嵌套在水平flexbox中，将垂直flexbox嵌套在垂直flexbox中。在chrome浏览器中，只有横线在横线中起作用，而在firefox中两者都不起作用

我在这里创建了一个JSFIDLE：

但这里是html：

A1
A2a
A2b
地下一层
B2a
B2b

​ 和CSS：

*{
保证金：0；
填充：0；
字体系列：Arial；
}
#A{
位置：绝对位置；
顶部：0px；
左：0px；
背景：黑色；
宽度：50%；
身高：100%；
显示器：-moz盒；
显示：-网络工具包盒；
显示：框；
-moz盒方向：水平；
-webkit盒方向：水平；
盒子方向：水平；
}
#A1{
背景：棕色；
宽度：100px；
身高：80%；
}
#A2{
背景：橙色；
身高：80%；
-moz-box-flex:1；
-webkit-box-flex:1；
箱型柔性：1；
}
#A2集装箱{
显示器：-moz盒；
显示：-网络工具包盒；
显示：框；
-moz盒方向：水平；
-webkit盒方向：水平；
盒子方向：水平；
宽度：100%；
身高：100%；
}
#A2a{
背景：红色；
身高：80%；
-moz-box-flex:1；
-webkit-box-flex:1；
箱型柔性：1；
}
#A2b{
背景：蓝色；
宽度：100px；
身高：80%；
}
#B{
位置：绝对位置；
顶部：0px；
右：0px；
背景：灰色；
宽度：50%；
身高：100%；
显示器：-moz盒；
显示：-网络工具包盒；
显示：框；
-莫兹盒方向：垂直；
-网络工具包盒方向：垂直；
盒子方向：垂直；
}
#B1{
背景：棕色；
宽度：80%；
高度：100px；
}
#B2{
背景：橙色；
宽度：80%；
-moz-box-flex:1；
-webkit-box-flex:1；
箱型柔性：1；
}
#B2容器{
显示器：-moz盒；
显示：-网络工具包盒；
显示：框；
-莫兹盒方向：垂直；
-网络工具包盒方向：垂直；
盒子方向：垂直；
宽度：100%；
身高：100%；
}
#B2a{
背景：红色；
宽度：80%；
-moz-box-flex:1；
-webkit-box-flex:1；
箱型柔性：1；
}
#B2b{
背景：蓝色；
宽度：80%；
高度：100px；
}

​#A在左边，B在右边#A和#A2容器为垂直柔性箱，#B和#B2容器为水平柔性箱。我为不同的div设置了颜色，并在每个级别上缩小它们（垂直的宽度和垂直的高度），以便更容易看到发生了什么。左侧（镀铬！）看起来不错，但右侧的#B2a应该垂直填充#B2（橙色）

---

我意识到，在这个例子中，在中间行/列中使用Flex将更容易使用一个Flex Box，但我正在动态地将内容加载到相当于A2的A2中，这恰好也是Flasbox。

< P> Firefox的Flex Box模型现在是相当笨拙的。如果你有固定或绝对定位的盒子，它会破裂；同样，没有宽度也会将FlexBox恢复为内联框。

FlexBox可以嵌套，但您必须摆脱定位。你基本上不再需要它了

根据我的经验，现在仍然存在的问题是z-堆叠FlexBox。 而且，将flexbox项目分别放置在主轴上也不是直截了当的（例如，如果我有一行，我想将一个子项目左对齐，另一个子项目右对齐，我将不得不使用边距等等，这可能会变得很痛苦）

此外，根据不同的浏览器，结果可能会非常不一致

无论如何，我鼓励您使用以下方法： 它帮助很大。

您使用（从2009年起）<代码>显示：永远不支持框。使用新语法（从2012年开始），并且没有中间容器，它可以在Firefox 22+中工作，并且应该可以在当前的Chrome中工作：