我想创建这个布局:

当项目不适合容器时,我们可以移动到下一行:

当容器比较宽的项目小时,我们可以将内容包装在多行中

使用Javascript非常简单,这里是https://jsfiddle.net/oucxsep4/的示例.
var choices = document.querySelectorAll('li');
var maxWidth = 0;
// read
for (i = 0; i < choices.length; ++i) {
maxWidth = Math.max(maxWidth, choices[i].offsetWidth)
};
// write
for (i = 0; i < choices.length; ++i) {
choices[i].style.width = maxWidth + "px";
};Run Code Online (Sandbox Code Playgroud)
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
background: red;
float: left;
margin: 5px;
}Run Code Online (Sandbox Code Playgroud)
<ul>
<li>first choice</li>
<li>choice</li>
<li>This is the wider choice</li>
<li>other choice</li>
</ul>Run Code Online (Sandbox Code Playgroud)
是否可以不使用Javascript而只使用CSS?我试过flexbox没有成功.
我已经阅读了很多关于CSS弹性框和CSS网格的教程,但坦率地说,我只是无法弄清楚如何做这个简单的(?)事情.
我想要的只是容器中的元素都与最宽的元素一样宽.
我不希望它们填满容器的整个宽度,只是增长到最大宽度.可以用CSS完成吗?
考虑这个HTML:
<div class="container">
<button>a normal button</button>
<button>tiny</button>
<button>a really, really, really wide button</button>
</div>
Run Code Online (Sandbox Code Playgroud)
这产生了这样的事情:
我想要的是这样的东西,它们是那个最宽按钮的宽度:
我不希望它们只是拉伸以填充页面的宽度:
可以这样做吗?如果是这样,上述HTML的CSS是什么?