我有一个嵌套的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’类使用只有BoxContent被增加的flexBox属性.对于特定的CSS属性和值,请检查小提琴.
”fullSize’只将width和height设置为100％.
当您使用Firefox和Chrome检查此小提琴时,您会得到不同的结果.在Firefox中,我会假定它必须做,这是拉伸内部的.BoxContent.然而在Chrome中,内部的.BoxContent没有被拉伸.
解决方法
除非你需要额外的div,否则删除它.元素的高度和沿主轴的长度(列方向)之间有时会有所不同,这在这里引起了一些混乱.基本上看起来,它比浏览器相信它高,这就是为什么高度：100％不像你所期望的那样工作(我不知道在这种情况下哪个行为是正确的).
无论什么原因,将元素提升到一个flex容器中.
<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>
