为什么缩放页面时header无法占满整个页面宽度？

问题复现 #

当页面缩放至400%/500%并向右滑动时，header元素无法铺满整个页面宽度，仅覆盖当前视口范围。

解决方案 #

核心是替换100vw的宽度设置，利用块级元素的默认宽度自适应特性，修改后的代码如下：

修改后的CSS代码 #

body {
    margin: 0;
    padding: 0;
    min-width: 100vw;
    height: 100vh;
    background-color: #172424;
}

header {
    background-color: #5fb5dd;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header div {
    display: flex;
    align-items: center;
}

nav ul {
    display: flex;
    list-style: none;
    padding: 0;
}

nav ul li {
    margin: 0 10px;
}

HTML代码（无需修改） #

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Canvas</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div>
                <img src="" alt="logo-img">
                <h1>some text</h1>
            </div>
            <nav>
                <ul>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                </ul>
            </nav>
        </header>
    </body>
</html>

原因说明 #

• 100vw仅代表当前浏览器可见视口的宽度，当页面缩放后出现横向滚动时，实际页面内容宽度已经超过视口，此时设置width:100vw的元素无法覆盖滚动露出的区域。
• 块级元素默认width:auto会自动适配父容器的宽度，当页面内容撑大body宽度时，header会自动铺满整个body宽度，解决滚动时的宽度缺口。
• 添加min-width:100vw是为了保证内容较少时，页面至少占满视口宽度，避免布局塌陷。

内容的提问来源于stack exchange，提问作者Mulinatti