Ширина экрана увеличивается, когда высота становится все больше

Question

Итак, я пытаюсь поместить кучку кубического div в страницу, например, в одной строке есть 20 кубов. Существует также дополнение, ограничивающее их. Он отлично работает до тех пор, пока высота контейнера не изменится, когда он также изменит ширину. Как сказал шекспир, «какой-то код говорит лучше тысячи слов»:

Редактировать: working demo (забыли некоторые вещи в последний раз, просто измените 20 на 500 в javascript, и вы увидите, что ширина контейнера станет больше. не дает никаких 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; 
}