Html 如何使用display:flex在包装列中获得垂直滚动？

我想创建一个垂直列表，在多列上显示flex，但它应该可以垂直滚动。另一件重要的事情，方向应该是从上到下；第二项应位于第一项的底部

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

我尝试过使用

overflow:auto

或

overflow-y:auto

，但都没有成功

JSFiddle：

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

ul{
显示器：flex；
列表样式：无；
宽度：210px；
高度：100px；
弯曲方向：立柱；
柔性包装：包装；
填充：0；
保证金：0；
溢出：自动；
}
李{
宽度：70px；
}

测试1
测试2
测试3
测试4
测试5
测试6
测试7
测试8
测试9
测试10
测试11
测试12
测试13
测试14
测试15
测试16
测试17
测试18
测试19
测试20

删除

弹性方向：列

更改

溢出：自动到<代码>溢出-y：自动

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

li {
   flex: 0 0 33.33%;
}

可以考虑使用额外的包装器< /P>

.wrapper{
宽度：210px；
高度：100px；
溢出：自动；
}
保险商实验室{
栏目：3个；
列表样式：无；
填充：0；
保证金：0；
}
李{
填充：5px0；
}

测试1
测试2
测试3
测试4
测试5
测试6
测试7
测试8
测试9
测试10
测试11
测试12
测试13
测试14
测试15
测试16
测试17
测试18
测试19
测试20

好的，但正如我说的，我想要多列。。。这就是为什么我需要包裹…是的，它工作，但它改变了方向。。。我需要第二项在第一项的底部。。。不在右侧使用弯曲方向：全部滚动我不知道这个属性。。。我在网上找不到。我试过了，但我的浏览器告诉我它是无效的……规范中没有这样的属性：不知道从哪里得到的。检查代码是否无效，并将其删除，以便在没有代码的情况下具有相同的行为。换句话说，它什么都没做，很抱歉我在规范中没有看到。是的，我在使用flex之前就尝试过这种方法，但问题是我并不总是有20个子菜单，它们可能只有2个，在这种情况下，我希望它们在一列中，但在这个解决方案中，它们将在多个列中。。。这就是为什么我转向flex解决方案…@SimonTrichereau即使使用flexbox，我也不认为你能做到，拥有动态的列数和垂直滚动。有很多变量，浏览器永远不知道什么时候考虑一个以上的列和何时添加卷轴。是的，我怀疑它是不可能的…但这就是我问的原因，想知道是否有解决办法。。。
li {
   flex: 0 0 33.33%;
}