fixed定位元素width:100%为何随其他元素min-width变化？

我原本认为，给fixed定位的元素设置width:100%时，它的宽度会和视口保持一致，下面的代码运行结果也符合这个预期：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>TEST</title>
        <meta name="viewport" content="initial-scale=1, width=device-width">
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            nav {
                position: fixed;
                background-color: black;
                width: 100%;
                height: 70px;
            }
        </style>
    </head>
    <body>
        <nav></nav>
    </body>
</html>

无论怎么用Chrome开发者工具调整视口大小，nav元素的宽度始终和屏幕尺寸一致。

添加main元素后的异常表现 #

现在我添加了一个main元素，并给它设置min-width:700px，代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>TEST</title>
        <meta name="viewport" content="initial-scale=1, width=device-width">
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            nav {
                position: fixed;
                background-color: black;
                width: 100%;
                height: 70px;
            }
            main {
                min-width: 700px;
                background-color: red;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <nav></nav>
        <main></main>
    </body>
</html>

这时出现了奇怪的现象：

• 当屏幕尺寸大于700px时，nav元素宽度仍和视口一致；
• 一旦屏幕尺寸小于700px，nav元素的宽度就固定为700px，和main元素的宽度相同。

我完全搞不懂：nav元素既没有设置min-width，也不是main的子元素，为什么它的宽度会跟着main的min-width变成700px？

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