当在默认行方向使用 flexbox 时，容器高度会增长以包含所有 flex 元素，即使它是绝对定位的。
#container {
position: absolute;
display: flex;
flex-wrap: wrap;
}
#container > div {
flex: 0 0 200px;
height: 200px;
}
参见 http://codepen.io/tamlyn/pen/dPjLoN/?editors=110
但是，如果将 flex 方向更改为列，即使元素换行到下一列，容器也会折叠为单个 flex 元素的宽度。
#container {
position: absolute;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
#container > div {
flex: 0 0 200px;
width: 200px;
}
参见 http://codepen.io/tamlyn/pen/rarbeN?editors=110
如何让容器以 column 模式包含所有 flex 元素？
我实际上已经找到了一个纯 CSS 的解决方案，但这并不是世界上最完美的解决方案。这是:http://codepen.io/anon/pen/vEPBKK
这里的技巧是创建一个 visibility: collapsed容器。在 flex 中，visibility: collapsed对象将自己从正常的 flex 流中取出，但为了布局的目的保留它们的尺寸。这会将 flex 容器加宽到所需的宽度，但不会影响 flex 元素。但是，有一些注意事项:
- 这需要一些技巧。如您所见，魔法
<div>是一个设定的宽度，但它使用 :nth-child以确定它前面有多少个框。如果您的实际设计在多于或少于 3 行处中断，则您必须对此进行调整，而且您肯定必须调整对象的宽度。
- 由于呈现错误，这在 IE 中不起作用。幸运的是，IE 的不正确实现首先完全按照您的要求进行，无需任何更改，因此您所要做的就是为 IE 提供它自己的带有一些条件语句的样式表，然后拍摄
div.magic一些好旧display: none .
HTML
<div id="container">
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="magic"></div>
</div>
CSS
#container {
position: absolute;
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 1px solid #f00;
height: 650px;
padding: 1px;
}
#container div.fb {
border: 1px solid #555;
flex: 0 0 200px;
background-color: #ccc;
width: 200px;
margin: 1px;
height: 200px;
}
#container > div.magic {
height: 0;
margin: 0;
padding: 0;
visibility: collapsed;
}
#container > div.magic:nth-child(5),
#container > div.magic:nth-child(6),
#container > div.magic:nth-child(7) {
width: 408px;
}
#container > div.magic:nth-child(8),
#container > div.magic:nth-child(9),
#container > div.magic:nth-child(10) {
width: 612px;
}
#container > div.magic:nth-child(11),
#container > div.magic:nth-child(12),
#container > div.magic:nth-child(13) {
width: 816px;
}