div 溢出到 body 元素外部，同时视口宽度减小

Question

以下是我的代码

body {
    margin: 0;
    border: 2px solid blue;
}


div {
    background-color: rgba(0,0,0, 0.1);
    width: 950px;
    margin:  0 auto;
    padding: 3em;
}


@media screen and (max-width: 950px) {
    div {
        width: auto;
    }

}

<div></div>

我想看看媒体查询是如何工作的。因此，如果我减小视口宽度，在某一时刻，会出现水平滚动条，并进一步减小视口宽度，该滚动条就会消失。所以，当水平滚动条出现时，我们可以看到

div

溢出了

body

边框。我已在

margin: 0

元素上设置了

body

。那么，发生了什么事？

Answer 1

最初，div 的固定宽度为 950px，并使用 margin: 0 auto 居中；当视口宽度低于 950px 时，div 的固定宽度仍保持在 950px。因此，如果没有水平滚动，视口将无法再包含整个 div。浏览器添加了水平滚动条，允许用户滚动并看到 div 溢出的部分。

当视口宽度为 950px 或更小时，媒体查询 (@media screen and (max-width: 950px)) 启动。它将 div 的宽度更改为 auto，这使得 div 适应视口的宽度。当视口宽度略低于 950px 时（但在媒体查询激活之前），div 会溢出，因为它仍然是 950px 宽。这会导致出现水平滚动条，并且由于 div 使用 margin: 0 auto; 居中，它看起来溢出了正文边框。

如果想防止当视口宽度小于950px时div溢出并触发水平滚动条，可以给div添加max-width属性，保证其不超过视口宽度

div {
    background-color: rgba(0,0,0, 0.1);
    width: 950px;
    max-width: 100%;
    margin:  0 auto;
    padding: 3em;
}