使用 wrap 在列 flex 方向上优先垂直滚动而不是水平滚动答案

【问题标题】：prioritize vertical scrolling over horizontal in column flex direction with wrap使用 wrap 在列 flex 方向上优先垂直滚动而不是水平滚动
【发布时间】：2014-10-10 00:56:45
【问题描述】：

在这个例子中我使用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;
}

【问题讨论】：

标签： css flexbox

【解决方案1】：

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

【讨论】：

【解决方案2】：

CSS3“列”功能对我很有效： http://caniuse.com/#feat=multicolumn

列内容可以是任何内容，而不是纯文本。在包含内容的 div 上设置 column-width，并将其包裹到另一个固定高度的 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>

【讨论】：