获取 flexbox 列换行以使用全宽并最小化高度

Question

我有一个固定宽度和可变高度的容器。我正在用未知数量的元素填充容器。 我希望元素按列排列，从上到下，然后从左到右。

我可以使用column，但是我不知道子元素的最大宽度，所以我不能设置column-width或column-count。

我认为display: flex 和flex-flow: column wrap 是要走的路，但如果我在容器上维护height: auto，它将生成为单个列，而无需包装元素以使用所有可用宽度。

我可以说服 flexbox 使用所有可用的宽度，从而最小化容器的高度吗？ 您会提出不同的解决方案吗？

---

小提琴：http://jsfiddle.net/52our0eh/

来源：

HTML：

<div>
    <span>These</span>
    <span>should</span>
    <span>arrange</span>
    <span>themselves</span>
    <span>into</span>
    <span>columns,</span>
    <span>using</span>
    <span>all</span>
    <span>available</span>
    <span>width</span>
    <span>and</span>
    <span>minimizing</span>
    <span>the</span>
    <span>container's</span>
    <span>height.</span>
</div>

CSS：

div {
    outline: 1px solid red;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    /*height: 8em;*/
}
span {
    outline: 1px solid blue;
}

Answer 1

您查找的更像是列规则：DEMO

div {/* do not set column numbers rule */
    width: 100%;
    -moz-column-width:4em;
    column-width:4em;
    -moz-column-gap:0;
    column-gap:0;
    -moz-column-rule:solid 1px;
    column-rule:solid 1px;
    text-align:center;
}

Answer 2

我已经妥协并在容器元素上设置了height: 10em（这似乎可以接受）和overflow-y: auto（在溢出的情况下添加水平滚动条）。

不过，我仍然想知道是否有办法使用所有可用宽度并最小化高度。

Answer 3

最后，溢出的选项是隐藏、滚动或换行。这个版本怎么样？它需要任何溢出的项目并将它们放在第二行。第二行的项目仍会填满可用空间，但由于共享空间的项目数量较少，因此会更大。

http://jsfiddle.net/52our0eh/14/

div {
    outline: 1px solid red;
    display: flex;
    flex-flow: row wrap;
}
span {
    outline: 1px solid blue;
    flex:1;
}