我正在尝试将flexBox嵌套在另一个flexBox中.外盒是垂直的:
+------+ | | +------+ | | | | | | +------+
顶部区域适合内容flex 0 1 auto且下半部分填充剩余空间flex 1 1 auto.
在下半部分我有另一个柔性盒水平.我希望2个内盒之间的空间位于对齐和弯曲端之间,因此基本上2个内部固定在左下角和右下角,如下所示:
+------+ | | +-+ +-| |L| |R| +------+
设置它似乎在Firefox中有效但在Chrome(Blink)和Safari中我得到了这个:
+------+ | | | | | | +-+--+-| |L| |R| +-+ +-+
这是HTML
<div id="outer"> <div id="top"> top </div> <div id="bottom"> <div id="bottomcontents"> <div id="botleft"> bottom left </div> <div id="botright"> bottom right </div> </div> </div> </div>
还有CSS
* { Box-sizing: border-Box; -moz-Box-sizing: border-Box; } html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; } #outer { height: 100%; border: 1px solid red; display: flex; display: -webkit-flex; flex-flow: column; -webkit-flex-flow: column; justify-content: center; align-content: center; align-items: center; -webkit-justify-content: center; -webkit-align-content: center; -webkit-align-items: center; min-height: auto; } #top { width: 100%; flex: 0 1 auto; -webkit-flex: 0 1 auto; border: 1px solid blue; } #bottom { width: 100%; height: 100%; flex: 1 1 auto; -webkit-flex: 1 1 auto; border: 1px solid green; } #bottomcontents { height: 100%; width: 100%; border: 1px solid pink; display: flex; display: -webkit-flex; flex-flow: row; -webkit-flex-flow: row; justify-content: space-between; align-content: center; align-items: flex-end; -webkit-justify-content: space-between; -webkit-align-content: center; -webkit-align-items: flex-end; min-height: auto; } #botleft,#botright { flex: 0 1 auto; -webkit-flex: 0 1 auto; } #botleft { border: 1px solid purple; } #botright { border: 1px solid cyan; }
解决方法
基本上,你所看到的是“身高:100%;”在#bottomcontents上强制容器在其周围容器的“外部”. 100%的高度最终得到它的父母的高度,父母也有100%的高度;意味着为#bottomcontents指定的高度被设置为与#outer相同的高度.您可以更清楚地看到,如果添加“overflow:hidden”,它将超出应有的范围.到#bottom.您可以在此处找到有关您的问题的更深入的讨论:您将遇到此问题:
Height 100% on flexbox column child
除非我错过了您需要的一些要求,否则您也可以删除#bottomcontents容器并使用#bottom进行到期.示例代码(底部的jsfiddle示例):
HTML:
<div id="outer"> <div id="top"> top </div> <div id="bottom"> <div id="bottomcontents"> <div id="botleft"> bottom left </div> <div id="botright"> bottom right </div> </div> </div> </div>
CSS:
* { Box-sizing: border-Box; -moz-Box-sizing: border-Box; } html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; } #outer { border: 5px solid red; display: flex; display: -webkit-flex; height: 100%; width: 100%; flex-direction: column; -webkit-flex-direction: column; } #top { width: 100%; border: 5px solid blue; flex: 0 1 auto; -webkit-flex: 0 1 auto; } #bottom { width: 100%; display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; justify-content: space-between; -webkit-justify-content: space-between; height: 100%; border: 5px solid green; align-items: flex-end; -webkit-align-items: flex-end; } #left { border: 5px solid purple; padding: .5em; flex: 0 1 auto; -webkit-flex: 0 1 auto; } #right { border: 5px solid cyan; padding: .5em; flex: 0 1 auto; -webkit-flex: 0 1 auto; }