尽管设置了适当的宽度，如何防止水平溢出？ [复制]答案

【问题标题】：How to prevent horizontal overflow despite proper width set? [duplicate]尽管设置了适当的宽度，如何防止水平溢出？ [复制]
【发布时间】：2022-01-23 04:07:00
【问题描述】：

似乎无论我如何具体定义元素宽度，它都会溢出文档。

<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 轴，即使滚动到它的末尾，我也不会在最右侧看到它的边距，我该如何解决这个问题？

【问题讨论】：

在你的宽度中使用 % 而不是 vw
不行，好像还是溢出
能否将相关的 HTML 添加到您的 CSS 中？
可能和浏览器有关？我正在使用火狐。或者也许是视口元标记？
简单去掉宽度，这里不需要

标签： html css frontend

【解决方案1】：

当您描述 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;
}

&lt;div id="navbar"&gt;&lt;/div&gt;

【讨论】：

像魅力一样工作，谢谢！
但我认为这不适用于所有视口