Css Flex容器不适应内容

我在这里学到： 如何制作自调整多列列表。但是，还有一个问题：容器没有根据内容调整其宽度：

ul{
高度：40px；
显示：内联flex；
弯曲方向：立柱；
柔性包装：包装；
边框：2件纯黑；
背景颜色：灰色；
填充：0；
}
李{
列表样式：无；
}
a{
显示：内联块；
宽度：60px；
}

请检查这是否是您想要实现的目标：

---

请检查这是否是您想要实现的目标：

---

不，不幸的是没有。看一下我的代码片段：两列中的排列正是我需要的，但是另外我需要调整容器（ul）的宽度以适应它的内容，以便它包含两列。不，不幸的是没有。看一下我的代码片段：两列中的排列正是我所需要的，但另外我需要调整容器（ul）的宽度以适应其内容，使其包含两列。请参阅，谢谢您的提示。没有解决方案，只有一个充分的答案。请参阅，谢谢您的提示。没有解决办法，只有一个充分的答案。

ul {
display:flex;
flex-wrap: wrap;
}
li {
    list-style: none;
    flex-direction: column;
    display: flex;
    border: 2px solid black;
    background-color: grey;
    height: 40px;
    padding: 0;
    margin: 0 10px;
}
a {
    display: inline-block;
    width: 60px;
}