尽管设置了适当的宽度，如何防止水平溢出？

Question

看来无论我怎么具体定义一个元素的宽度，它都会溢出文档。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<body>
    <div id="navbar">
        <div id="navbar-options">
            <div class="navbar-option"><a class="navbar-option-link" href="/home">Home</a></div>
            <div class="navbar-option"><a class="navbar-option-link" href="/news">Newsfeed</a></div>
            <div class="navbar-option"><a class="navbar-option-link" href="/societies">Societies</a></div>
        </div>
    </div>

    <div id="title-box">
        <h1 id="title">Students Of Westminster</h1>
    </div>

</body>

* {
    margin: 0;
    padding: 0;
}

#navbar {
    width: 100vw;
    max-width: 100%;
    min-height: 2.5vw;
    display: flex;
    margin: .5rem;
}

The navbar overflowing, indicated by the horizontal scroll bar

即使使用这段代码，我的导航栏也会溢出 X 轴，即使滚动到最后，我也看不到它在最右侧设置的边距，我该如何解决这个问题？

Answer 1

当您描述 width 和 margin 时，总宽度将为 width + margin。

如果您希望您的元素具有包括元素边距在内的完整视口宽度，您可以使用 calc 删除 2 * 边距。

* {
    margin: 0;
    padding: 0;
}

#navbar {
    width: calc(100vw - 1rem);
    max-width: 100%;
    min-height: 2.5vw;
    display: flex;
    margin: .5rem;
    background: red;
}

<div id="navbar"></div>

尽管设置了适当的宽度，如何防止水平溢出？

How to prevent horizontal overflow despite proper width set?

html

css

frontend