如何使用 display: flex 在包装列中进行垂直滚动？

Question

我想在多列上制作一个带有显示弹性的垂直列表，但它应该可以垂直滚动。还有一点重要，方向应该是从上到下；第二项应该在第一项的底部。

最后一件事，我并不总是有 20 个子元素，它可能只有两个，在这种情况下，我只需要将它们放在一列，而不是倍数......这就是为什么我没有使用CSS 多列布局解决方案，转向 flexbox。

我尝试过使用overflow: auto 或overflow-y: auto，但都没有成功。

JSFiddle：https://jsfiddle.net/r69onzhy/4/

如您所见，它可以水平滚动，但我希望垂直拥有它。

ul {
  display: flex;
  list-style: none;
  width: 210px;
  height: 100px;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  overflow: auto;
}

li {
  width: 70px;
}

<ul>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 5</li>
  <li>Test 6</li>
  <li>Test 7</li>
  <li>Test 8</li>
  <li>Test 9</li>
  <li>Test 10</li>
  <li>Test 11</li>
  <li>Test 12</li>
  <li>Test 13</li>
  <li>Test 14</li>
  <li>Test 15</li>
  <li>Test 16</li>
  <li>Test 17</li>
  <li>Test 18</li>
  <li>Test 19</li>
  <li>Test 20</li>
</ul>

Answer 1

删除flex-direction: column

将overflow: auto; 更改为overflow-y: auto;

如果每行需要 3 个项目，请使用

li {
   flex: 0 0 33.33%;
}

Answer 2

ul {
  display: flex;
  list-style: none;
  width: 210px;
  height: 100px;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
  overflow: hidden;
  overflow-y: auto;


  li {
    width: 100%;
  }
}

Answer 3

您可以考虑使用带有额外包装器的columns

.wrapper {
  width: 210px;
  height: 100px;
  overflow: auto;

}
ul {
  columns:3;
  list-style:none;
  padding: 0;
  margin: 0;
}

li {
 padding:5px 0;
}

<div class="wrapper"><ul>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 5</li>
  <li>Test 6</li>
  <li>Test 7</li>
  <li>Test 8</li>
  <li>Test 9</li>
  <li>Test 10</li>
  <li>Test 11</li>
  <li>Test 12</li>
  <li>Test 13</li>
  <li>Test 14</li>
  <li>Test 15</li>
  <li>Test 16</li>
  <li>Test 17</li>
  <li>Test 18</li>
  <li>Test 19</li>
  <li>Test 20</li>
</ul>
</div>