使用列换行来放大flex div的宽度以适应内容

Question

我希望有一个元素，只使用css规则就可以增长和减少到其内容的维度。

这里有一个例子：

ul {
list-style: none;
padding: 1rem 1rem 1rem 0;
background-color: lightblue;
max-height: 300px;
display: inline-flex;
flex-flow: column wrap;
align-items: flex-start;
width: 238px;
}
ul li {
width: 100px;
border: 1px solid red;
margin-left: 1rem;
}
/* HTML */
<ul>
<li>item</li> // repeated n times
</ul>

https://codepen.io/mt_dt/pen/GRJYaNj?editors=1100

应该是这样的：https://ibb.co/6wmYkGX

Answer 1

如果你想让列表中的每个元素都像ul元素一样宽，你需要从ul元素中删除硬编码的高度和柔性属性(它们没有用处(，并设置宽度：100%；关于lis:

ul {
list-style: none;
padding: 1rem 1rem 1rem 0;
background-color: lightblue;
width: 235px;
}
ul li {
width: 100%;
border: 1px solid red;
margin-left: 1rem;
}

看看这个电笔。希望它能有所帮助！