无论子项的数量如何，计算子维度始终适合容器内部

Question

我有一个子元素网格，都是完全正方形的，需要尽可能完美地放入容器内部。容器大小可以在宽度和高度上改变，容器内的项目数也可以动态改变。

我需要能够在容器内的子项上设置大小，以便形成尽可能接近完美的网格。

我尝试过各种解决方案，包括另一个stackoverflow问题中的这个（接受）问题：Calculate elements dimensions in order to fit inside container

除了尝试使用各种媒体查询解决问题之外，尽管这限制了我能够做到的事情（元素被溢出：隐藏），因此不是一个可行的解决方案。 / p>

.container {
   border: 1px solid blue;
   height: 400px;
   overflow: hidden;
   width: 602px;
}

.item {
  border: 1px solid red;
  float: left;
}

<div class="container">
  <div class="item" style="height:200px; width: 200px;"></div>
  <div class="item" style="height:200px; width: 200px;"></div>
  <div class="item" style="height:200px; width: 200px;"></div>
  <div class="item" style="height:200px; width: 200px;"></div>
  <div class="item" style="height:200px; width: 200px;"></div>
  <div class="item" style="height:200px; width: 200px;"></div>
  <div class="item" style="height:200px; width: 200px;"></div>
</div>

我想更新每个子元素的height和width属性。