我在使用 flexbox 时遇到了问题。
我正在使用带有 的容器flex-direction: column; flex-wrap: wrap，因此我的内部项目实际上可以放置在多列中。
问题是浏览器仍然将容器的宽度计算为内部项目宽度的总和！
我的容器块应该有一个较小的宽度（基于内容大小），但它实际上是巨大的。
无论如何，在使用列而不是行时，以这种方式计算容器的宽度也很不自然。
看看我的代码中的绿色块。它有一个巨大的，但它不应该有。此外，当您从容器中移除项目时，它会变小。
我期望的是具有小宽度的容器，因此它不会占用超过可用空间的一半。
在最新的 OS X 上的最新 Safari 和 Chrome 上进行了检查。
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
background: #aa0000;
height: 100px;
}
.group {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
}
.g1 {
background: #00aa00;
}
.g2 {
background: #0000aa;
}<div class="container">
<div class="group g1">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div> …