Javascript 一组正方形的响应宽度和高度

我正在创建一个1:1正方形的网格。用户可以继续添加方块，我希望方块的大小保持在纵横比，但相应地调整大小。棘手的是，我希望正方形在页面上始终可见，也就是说，没有滚动，网页的宽度和高度都会有响应

我创建了一个示例，在测试时每秒添加一个正方形。但是，我无法让它与高度部分一起工作。我已经能够使它与宽度一起工作

setInterval（（）=>{
//console.log（document.getElementsByClassName（'square-container'）[0]）；
document.getElementsByClassName（'square-container'）[0].innerHTML+=（“”）；
}, 1000);
.square容器{
显示器：flex；
柔性包装：包装；
}
.广场{
位置：相对位置；
弹性基础：计算（33.333%-10px）；
保证金：5px；
框大小：边框框；
背景：红色；
过渡：背景1s；
}
.square：：之前{
内容：“；
显示：块；
填充顶部：100%；
}
使用浮动代替换行。设置方形容器显示块

<div>
<div id="square-container">
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
</div>
</div>

#square-container{
  display: block
}
#square{
    float: left;
    height: 100px;
    width: 100px;
    background-color: orangered;
    margin: 1px;
}


#方形容器{
显示：块
}
#方格{
浮动：左；
高度：100px；
宽度：100px；
背景颜色：橙色；
保证金：1px；
}
我可以推荐一种纯javascript方法吗

基本上只需设置一个初始值，让javascript在每次添加一个正方形时进行所有计算


//用于调整正方形大小的函数
函数resizeSquares（）{
//拿正方形
squares=document.getElementsByClassName（'squares'）；
对于（i=0；i document.documentElement.clientHeight）{
//如果有，则每行增加一平方容量
squarePerRow=squarePerRow+1；
}
//调整正方形的大小
调整正方形的大小（）
}，1000）
#容器{
显示器：flex；
柔性包装：包装；
}
.广场{
背景：红色；
边框：5px纯白；
框大小：边框框；
过渡：全部，0.5s；
}

你所说的“高度部分”是什么意思？谢谢你的输入，但这并不完全是我想要的，因为容器溢出，需要滚动。阿古斯丁·多拉多的解决方案更接近我想要的，但不是我想要的。谢谢你。然而，它并没有那么有效。看起来很紧张，但这正是我要找的东西。我可以使用Javascript解决方案，这绝对是正确的方向。