容器中的CSS列超出列数

Question

指定2的column-count时：

.parent {
    -webkit-column-count: 2;
    overflow-y: scroll;
    max-width: 100%;
    height: 400px;
}
.child {
    display: block;
}

如果指定了高度，我会超过2列。它水平生长而不是垂直生长，溢出最大宽度而不是溢出高度。

JSFiddle示例：http://jsfiddle.net/brentonstrine/6bk5jb3L/2/

我想让它垂直滚动而不是水平滚动，并且仅限于我指定的列数。

我无法添加额外的标记，我必须使用现有的元素。

Answer 1

您也可以使用flexbox实现此目的。请记住使用正确的css前缀。

我的解决方案在JSFiddle：http://jsfiddle.net/6bk5jb3L/41/

我也删除了-webkit-column-count样式。

下面将为您删除滚动条：

.parent::-webkit-scrollbar { 
    display: none; 
}

修改 以下是保留-webkit-column-count样式的修复示例：http://jsfiddle.net/6bk5jb3L/47/

.parent {
    overflow-x: auto;
    width: 100%;
    height: 400px;
    border: solid 1px red;
    box-sizing: border-box;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-count: 2;
}

.parent::-webkit-scrollbar { 
    display: none; 
}

.child {
    display: block;
    width: 50%;
    border: solid 1px blue;
    box-sizing: border-box;
    height: 40px;
}

Answer 2

由于您无法更改标记，请添加此JQuery，将parent <div>与另一个<div>包裹在一起，如下所示：http://jsfiddle.net/6bk5jb3L/12/

<强> JQuery的

$( ".parent" ).wrap( "<div class='parentToTheParent'></div>" );

<强> CSS

.parentToTheParent {

    overflow-y: scroll;
    max-width: 100%;
    height: 400px;
    border: solid 1px red;
}
.parent{ width: 100%; -webkit-column-count: 2;}
.child{

    border: solid 1px blue;

}

PS父母的父母只是为了好玩，不要过分认为它哈哈