HTML 100% 溢出时的宽度

Question

我正在尝试将容器的宽度设置为页面的 100%。它本身似乎没问题，但是一旦我在容器中添加另一个 <div> 元素，它就会溢出并且页面变得可滚动。我不知道出了什么问题，因为我没有更改 padding 和 margin 设置。

编辑：问题似乎只发生在 chrome。

编辑 #2：有些人告诉我他们没有遇到同样的问题，所以我上传了项目文件和我在 google 驱动器上看到的截图：

/* this is my css: */

body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  background-color: steelblue;
}

#mainContainer {
  width: 100%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.genContainer {
  width: 50%;
  display: flex;
  justify-content: center;
}

.square {
  width: 5%;
  border: 1px solid black;
}

.circle {
  width: 5%;
  border: 1px solid black;
  border-radius: 50%;
}

<body>
  <div id="mainContainer">

    <div class="genContainer">

      <div class="person square"></div>

    </div>

  </div>
</body>

谢谢！

Answer 1

改变这个：

#mainContainer {
    width: 100%;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

为此：

#mainContainer {
    max-width: 100%; /*This limits the container to be 100% regardless of what's within it*/
    border: 1px solid black;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

Answer 2

取消设置浏览器添加的填充或边距。某些浏览器默认将 css 添加到您的 HTML 页面。将此写为第一个样式规则：

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

这会将所有元素的边距和填充重置为 0，因此稍后在 css 中您可以覆盖它。

HTML 100% 溢出时的宽度

HTML width at 100% overflowing

html

css

width