html - 如何使用显示 : flex? 在包装列中进行垂直滚动

Question

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

最后一件事，我并不总是有 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%;
}