使用flexbox时遇到问题。

我正在使用容器flex-direction: column; flex-wrap: wrap，因此我的内部项目实际上可以放在多列中。

问题是浏览器仍将容器的宽度计算 为内部项目宽度的总和 ！

我的容器块应具有较小的宽度（基于内容大小），但实际上很大。

无论如何，使用列而不是行时以这种方式计算容器的宽度也是非常不自然的。

看看我的代码中的绿色块。它具有巨大的优势，但事实并非如此。另外，当您从容器中取出物品时，它会变小。

我期望容器的宽度较小，因此不会占用超过可用空间的一半。

在最新的Safari和最新的OS X上选中此选项。

.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>

  <div class="group g2">

    <div class="item">Item</div>

  </div>

</div>