html - 带有列和 overflow-y 的可滚动容器 : auto

Question

我想制作一个可滚动的容器，其内容按列排列。我发现我不能在同一元素上将属性 column-count 与 overflow-y: auto 和固定大小一起使用。内容总是水平溢出，产生比我在 column-count 中指定的更多的列。

HTML:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>   
</ul>

<ul class="with-columns">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>  
</ul>

CSS:

li {
  list-style-type: none;
  padding: 5px;
  background: coral;
  margin: 2px;
  width: 80%;
  display: inline-block;
  height: 60px;
}

li:nth-child(2n+3) {
  height: 90px; /* simulate variable height content  items */
}

ul {
  background: lightblue;
  position: relative;
  width: 300px;
  height: 300px;
  overflow-y: auto;
}

ul.with-columns {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-count: 2;
  column-gap: 0;
}

如何使 ul.with-columns 垂直滚动而不用额外的元素包装它？

JSBin:http://jsbin.com/gegawidayi/4/edit

Answer 1

我认为您可能想要做的是设置 max-height 而不是 ul 上的高度。

ul {
    background: lightblue;
    position: relative;
    width: 300px;
    max-height: 300px;
    overflow-y: auto;
}

这应该会为您提供所需的内容。