css - 在带换行的列 flex 方向上，垂直滚动优先于水平滚动

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

我尝试指定溢出方向，但在这种情况下似乎不起作用。我认为问题在于您正试图将溢出方向作为环绕方向。
例如，尝试让它水平地做同样类型的事情。它会产生同样的问题，因为您正试图朝同一方向流动和溢出。就是说，我不认为您可以直接使用 CSS 做您想做的事。您可能需要考虑一个像 Columnizer 这样的 js 工具。或 Masonry .原因是它不能只是流动。它需要先计算列，然后调整元素填充列，然后确定它在溢出方向上的内容长度。对于流程，如果您的溢出与您的流程方向相同，浏览器无法确定何时应该中断到新的行/列。我以前做过类似的东西，水平工作，但它的工作方式是将所有东西都放在 1 行中，这不是你真正想要的。