带滚动条的两列中的元素

Question

我想在两列中可视化一组元素。当元素数量超过可用空间时，我希望看到一个垂直滚动条。

这里是HTML：

<div class="container">
 <div class="box"> box 1</div>
 <div class="box"> box 2</div>
 <div class="box"> box 3</div>
 <div class="box"> box 4</div>
 <div class="box"> box 5</div>
 <div class="box"> box 6</div>
 <div class="box"> box 7</div>
 <div class="box"> box 8</div>
 <div class="box"> box 9</div>
 <div class="box"> box 10</div>
 <div class="box"> box 11</div>
 <div class="box"> box 12</div>
</div>

这里是CSS：

.container {
 border: 1px solid red;
 height: 100px;

 -webkit-column-count: 2; /* Chrome, Safari, Opera */
 -moz-column-count: 2; /* Firefox */
 column-count: 2;
}

.box {
 border: 1px solid blue;
 width: 100px;
}

JSFiddle example。

当元素为10或更少时，渲染就可以了。

当元素超过10时，剩余的元素将从右侧的容器中渲染出来。我希望看到容器的垂直滚动条，并在第1列和第2列中分配1-6的元素。

可以进行此类分发吗？

Answer 1

您可以设置max-height，然后添加overflow-y: scroll以允许容器滚动。 overflow-x: hidden将删除垂直滚动条。

Fiddle

示例

.container {
  border: 1px solid red;
  max-height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
}