在列弯曲方向上使用换行优先考虑垂直滚动而不是水平滚动

Question

在这个例子中，我使用flex-direction:row

http://jsfiddle.net/9a1d2ddz/

当空间不足以容纳元素时，会出现一个垂直滚动条

我想达到同样的效果，但是使用"从上到下"的盒子排序

http://jsfiddle.net/ebd8rsnx/

但是我想保留垂直滚动条而不是水平滚动条

与上面的基本相同，但从上到下的盒子顺序而不是从左到右

我以为我可以用max-height:min-content做点什么，但似乎没有效果。

提前谢谢你

div
{
    overflow:auto;
    border:2px blue solid;
    box-sizing:border-box;
    flex-direction:column; /* try column|row */
    display:flex;
    flex-wrap:wrap;
}
span
{
    min-width:150px;
    min-height:150px;
    flex:1 1 auto;
    border:1px red solid;
    display:block;
    overflow:hidden;
    box-sizing:border-box;
}

Answer 1

我尝试指定溢出方向，但在这种情况下似乎不起作用。我认为问题在于您试图将溢出方向作为您的wrap方向。
例如，试着让它在水平方向上做同样的事情。它会产生同样的问题，因为你试图在同一个方向上流动和溢出。也就是说，我不认为你可以用纯css做你想做的事情。你可以考虑使用js工具，如Columnizer或砌筑。原因是它不能随波逐流。它需要首先计算列，然后调整元素以填充列，然后在溢出方向确定其内容长度。对于流，如果溢出与流的方向相同，则浏览器无法确定何时应该中断到新行/列。我以前做过类似的东西，水平显示，但它的工作方式是把所有东西放在一行，这不是你真正想要的。

Answer 2

CSS3的"column"功能很适合我:http://caniuse.com/壮举=多列

列的内容可以是任何内容，而不是纯文本。在包含内容的div上设置列宽，并将其换行到另一个固定高度的div中。

.columns-container {
    max-height: 50vh;
    overflow-y:auto;
}
.columns {
    -webkit-column-width: 15em;
    -moz-column-width: 15em;
    column-width: 15em;
    /*optional column-count*/
    /*
    -webkit-column-count:4;
    -moz-column-count: 4;
    column-count: 4;
    */
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
}
<div class="columns-container">
    <div class="columns">
        <div>Lorem ipsum dolor sit amet. Sample text 1</div>
        <div>Lorem ipsum dolor sit amet. Sample text 2</div>
        ...
        <div>Lorem ipsum dolor sit amet. Sample text 1000</div>
    </div>
</div>