高さが大きくなると視野が大きくなる

Question

私は一列に20個の立方体があるなど、立方体divをページに収めようとしています。それらを区切るパディングもあります。コンテナの高さが変わるまでうまく動作し、幅が変わるとうまく動作します。シェイクスピアは「あるコードが1000語以上のものを話す」と述べているので、

編集：working demo（最終的にいくつかのことを忘れてしまった。ちょうど20〜500のジャバスクリプトを変更すると、コンテナの幅が大きくなることがわかる。なしSENS）

Htmlの

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

CSS

#container{ 
    background: red; 
    display: flex; 
    width: 100vw; 
    height : 100vh; 
    flex-wrap:wrap; 
} 

.cube{ 
    background: grey; 
    width: 4vw; 
    height: 4vw; 
    margin: 0.5vw; 
    } 
} 

ます

Javascriptを

let container = document.getElementById("container"); 

<!-- this works --> 
for(let i = 0; i < 20; i++){ 
    let div = document.createElement("div"); 
    div.setAttribute("class","cube"); 
    div.innerHTML = i + 1; 
    container.appendChild(div); 
} 

ニート、これは動作しています。しかし、私が1000個のキューブを置くとどうしますか？

for(let i = 0; i < 1000; i++){ 
    let div = document.createElement("div"); 
    div.setAttribute("class","cube"); 
    div.innerHTML = i + 1; 
    container.appendChild(div); 
} 

ビューの幅が変わっくそ...でも、ここで何が起こっているの？

Answer 1

はそれが動作しますうんoverflow: hidden;

#container { 
    background: red; 
    display: flex; 
    width: 100vw; 
    height: 100vh; 
    flex-wrap: wrap; 
    overflow: hidden; 
}