Javascript 列表项将自动转到第二列，并且容器空间也将增加

我正在尝试建立垂直导航。导航的外部宽度将是固定的，当项目增加时，其他项目将转到下一列。 我用

flexbox

尝试了它，并添加了

flex-wrap:wrap在容器中。但我不能设计这个



我试过使用这些代码


.container{
显示器：flex；
弯曲方向：立柱；
高度：320px；
宽度：80px；
柔性包装：包装；
背景：红色；
填充：10px
}
.项目{
填充：20px 30px；
背景：#efef；
显示：内联块；
边距：0 5px 5px 0；
宽度：20px
}

1.
2.
3.
4.
5.
6.
7.
代替
宽度：80px提供
宽度：自动
或根本不提供
宽度
。当项目数增加到容器底部时，它将添加到下一列。
您无法通过此处控制容器。您应该使其具有自动宽度的灵活性

了解更多


.container{
显示器：flex；
弯曲方向：立柱；
高度：320px；
柔性包装：包装；
背景：红色；
填充：10px；
宽度：自动；
}
.项目{
填充：20px 30px；
背景：#efef；
显示：块；
边距：0 5px 5px 0；
宽度：20px；
}

1.
2.
3.
4.
5.
6.
7.
8.
自动
宽度不解决它。。。见红色背景（
容器
）必须覆盖物品：）容器
应覆盖物品，但应采用包装柔性箱的自动宽度-这是OP的要求。。。。