CODEWITHSUNDEEP
javascripthtmlcss
Ced
Ced

Reputation: 17367

Viewwidth getting bigger when height getting bigger

So I'm trying to fit a bunch of cubic div into a page such as there is 20 cubes on one row. There is also padding delimiting them. It works fine until the height of the container changes, when it does it also changes the width. As shakespear said "some code speaks better than a thousand words":

edit: working demo (forgot some things in last, just change 20 to 500 in the javascript and you will see the width of the container will get bigger. Which makes no 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);
}

Neat, this is working. But wait, what if I put 1000 cubes ?

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

Damn the view width changed... What is even happening here ?

Upvotes: 0

Views: 50

Answers (1)

XianChen
XianChen

Reputation: 114

Add the property overflow: hidden;

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

Upvotes: 1

Related Questions