Question

所以我试图将一堆立方div放入一个页面，例如一行有20个立方体。还有填充分隔它们。它工作正常，直到容器的高度发生变化，当它发生变化时，它也会改变宽度。正如莎士比亚所说：“有些代码说得胜于千言万语”：

编辑：working demo（在最后忘记了一些事情，只需在javascript中更改20到500，你就会看到容器的宽度会变大。这没有任何意义）

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

当高度越来越大时，Viewwidth越来越大

1 个答案: