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

我正在创建一个1：1正方形的网格.用户可以继续添加正方形,我希望正方形的大小保持其长宽比,但要相应地调整大小.棘手的部分是我希望正方形在页面上始终可见-也就是说,没有滚动,并且网页将响应宽度和高度.

我创建了一个示例,在测试此示例时每秒添加一个正方形.但是,我无法使其与高度部分一起使用.我已经能够使用宽度了.

setInterval(() => {
  //  console.log(document.getElementsByClassName('square-container')[0]);
  document.getElementsByClassName('square-container')[0].innerHTML += ("<div class='square'></div>");
},1000);

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  Box-sizing: border-Box;
  background: red;
  transition: background 1s;
}

.square::before {
  content: "";
  display: block;
  padding-top: 100%;
}

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

我没有使用引导程序之类的任何ui库,而仅使用了html,css和javascript.

最佳答案

使用Float而不是wrap.设置方形容器显示块.

<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;
}