Javascript css网格或flex适合尽可能多的列，而无需指定项目宽度或列数

我的操场小提琴：

所有解决方案都对列的数量进行假设，例如，

网格模板列：重复（1fr，7）

或对项目宽度进行假设：

网格模板列：重复（自动填充，最小值（200px，1fr））

就我而言：


仅设置容器的宽度（例如
50vw
）
然后我想用最宽的元素匹配尽可能多的列
我不知道我会有多少元素
我不知道最宽的元素有多宽

是否有一个动态的解决方案来获得我的示例中的第二个示例


预期结果：不知道项目2的宽度和COL的数量
123
123456
1.
2.
3.
12
23
56
89
4.
（调整div.container2角落中的句柄大小）
我对flexbox没有太多经验，但我的总体想法是循环遍历每个子元素，并根据是否要考虑边框等来确定其
偏移宽度
或
clientWidth
。通过这种方式，您可以动态计算列数并确定最宽的元素。在那之后，只需计算一下可以容纳多少列，然后动态地设置它们。为
resize
事件创建一个事件侦听器，以便在resize时再次运行代码，您就完成了。您需要一个js解决方案来解决此问题-css不能使所有同级都像最宽的子级一样宽。由于没有js的尝试，我投票决定以太宽泛的主题作为结束。这应该是开放的。因为答案是否定的，CSS没有脚本无法做到这一点，因此太宽泛了，我同意Pete的观点。
<div class="container2">
  <div class="item2">123</div>
  <div class="item2">123456</div>
  <div class="item2">1</div>
  <div class="item2">2</div>
  <div class="item2">3</div>
  <div class="item2">12</div>
  <div class="item2">23</div>
  <div class="item2">56</div>
  <div class="item2">89</div>
  <div class="item2">4</div>
</div>