html - CSS完全用许多相同的子代填充容器

Question

有没有一种方法可以用任意数量的正方形相同大小的子对象(少至五个，最多50个)填充给定的容器，以使这些子对象:

填充容器，并保留尽可能少的垂直和水平空间；和

不溢出容器吗？

例如，假设有一个由17个圆形化身组成的框，每个框都按比例放大，直到尺寸进一步增加将导致它们环绕并流到容器底部之外。
我知道我可以使用JS计算填充容器的 child 的最佳比例，但是我感觉 flex或 grid都内置了此功能。
这与我所获得的差不多:

.container {
    border: 1px solid tomato;
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    height: 100vh;
    justify-content: center;
    width: 100vw;
}

.container > div {
    background-color: coral;
    flex: 0 0 12%;
    margin: .5em;
}

.container .div::before {
    content: '';
    display: block;
    padding-top: 100%;
}

    <div class="container">
        <!-- 32 children -->
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div>
    </div>

抱歉，如果这是重复的。我竭尽全力在提出问题之前先寻求答案。

[编辑:添加详细信息]
这是期望的结果，显示一个具有固定大小的框，大小调整为大小的条目，直到容器完全装满为止。如果包装盒的尺寸与此不同，或者包装盒内的物品数量不同，则这些物品会按比例缩放，直到它们都适合放入内部而不会溢出为止。最后两个孤儿的对齐并不重要，但它们的大小必须与其余元素的大小相同。

Answer 1

用flex可以实现(某种)。您可以使用space-evenly的justify-content属性来确保每列之间的间隔均匀。但是，如果没有javascript，则无法使行与列之间具有相同的间隔。相反，您必须通过row-gap手动定义行间距。

.flex-container {
  width: 300px;
  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 8px; /* Issue on this line */
  
  background-color: blue;
}

.flex-item {
  padding: 30px;
  background-color: red;
}

<div class="flex-container wrap">
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
  <div class="flex-item">1</div>
</div>

附带说明一下，由于您不能在模板列中包含隐式尺寸定义，因此在网格中绝对不可能做到这一点。 IE。以下将 不起作用起作用:

grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr))