这是一个非常manuel的解决方案。 如果您正确设置MainContainer的宽度和高度，它将保持同步。

null

const init = () => {
  const container = document.querySelector('.container');
  const l = 70; //how many element you want
  const h = container.clientHeight;
  const w = container.clientWidth;
  for(const i of Array(l).keys()){
    const square = document.createElement('div')
    square.classList.add('square');
    const x = parseInt(Math.sqrt((w*h) / (l)));
    const xcount = Math.ceil(w/x);
    const xLength = Math.ceil(w / xcount);
    const ycount = Math.ceil((l/xcount));
    const yLength = parseInt(h / ycount);
    const edge = Math.min(xLength, yLength);
    square.style.width = edge + "px";
    square.style.height = edge + "px";
    container.appendChild(square)
  }
}

init()

* {
  box-sizing: border-box;
}

.mainContainer{
  width: 500px;
  height: 150px;
  min-height: 100%;
  background-color: #dfdfdf;
}

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.square{
    background-color: orange;
    border: solid 1px;
    height: 1px;
    width: 1px;    
}

<div class="mainContainer"><div class="container">
</div></div>

我试过这样做，但当您调整大小时，需要重新加载，以便使clientwidts检测和预测框的高度和宽度

null

(function(){
    const init = () => {
        const container = document.querySelector('.container')
        for(const i of Array(70).keys()){
            const square = document.createElement('div')
            square.classList.add('square')
            var w = document.body.clientWidth;
            if (w > 800){
                square.style.width = w / 385 + 'em';
                square.style.height = w/ 395 + 'em';
                square.style.margin = .3 + 'em';
            } else {
                square.style.width = w / 475 + 'em';
                square.style.height = w/ 485 + 'em';
                square.style.margin = .2 + 'em';
            }
            container.appendChild(square)
        }
    }
init()
}())

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
    position: relative;
    max-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.square{
    background-color: orange;
    perspective: 1000px;
}

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