Javascript 从容器中删除（而不是隐藏）多个div的溢出，或将数量限制到容器？

我想制作一个背景，根据容器的大小添加和删除方形div，这会受到窗口大小的影响

为了添加div，我遵循了本文中的示例。但是，调整屏幕大小会继续增加div的数量。有没有办法将正方形的数量限制到容器的大小，或者消除溢出

（我不想简单地说css溢出：隐藏，因为这并不能解决10亿个div的乘法问题。）我是一个绝对的javascript新手，所以请容忍我

let contain = document.getElementById("squareContain");
let width = contain.offsetWidth;
let height = contain.offsetHeight;
var containerArea = width * height;
var canAdd = Math.floor(containerArea/1600); //For 40px x 40px squares

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}

$(window).on("resize", function(){
    multiplyNode(document.querySelector('.square'), canAdd, false);
}).resize();

let contain=document.getElementById（“squareContain”）；
让宽度=contain.offsetWidth；
让高度=包含。远视；
var containerArea=宽度*高度；
var canAdd=数学地板（集装箱面积/1600）//对于40px x 40px正方形
函数多同步节点（节点、计数、深度）{
对于（变量i=0，复制；i

---

编辑当前您只计算一次适合的方块数，但每次更改窗口大小时需要重新计算：

let contain=document.getElementById（“squareContain”）；
函数canAdd（）
{
设square=contain.children[0]，
cWidth=contain.offsetWidth，
cHeight=contain.offsetHeight，
sWidth=平方。偏移网络宽度，
sHeight=平方米。偏离视线；
返回数学层（cWidth/sWidth）*数学层（cHeight/sHeight）；
}
函数多同步节点（节点、计数、深度）{
if（contain.children.length==计数）
返回；
if（contain.childrence.lengthcount）
{
contain.removeChild（contain.children[contain.children.length-1]）；
}
}
}
$（窗口）.on（“调整大小”，函数（）{
多同步节点（contain.querySelector（'.square'）、canAdd（）、false）；
}).resize（）
.square\u容器{
背景色：#ccc；
位置：固定；
高度：100vh；
宽度：100vw；
显示器：flex；
证明内容：中心；
对齐内容：开始；
柔性包装：包装；
保证金：0自动；
填充：0自动；
}
.广场{
宽度：40px；
高度：40px；
背景颜色：蓝色；
边框：1px纯红；
保证金：0；
填充：0；
}

我同意每次更改窗口时都应该重新调用，但是如果窗口缩小，这个示例仍然会溢出容器。我想知道我是否需要重新考虑多同步节点函数，或者做一个if语句？@I\u需要\u帮助\u请，我已经更新了代码