html - 带有滚动条的两列元素

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 列中的 1-6 和第 2 列中的 7-12。

有可能有这样的分布吗？

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;
}