为什么边框加了滚动条（溢出）？ [复制]答案

【问题标题】：Why does the border add a scrollbar (overflow)? [duplicate]为什么边框加了滚动条（溢出）？ [复制]
【发布时间】：2020-08-05 21:53:02
【问题描述】：

第一张图片有滚动条，第二张没有。

更改在 .tabulator CSS 类中，即边框规则。

为什么只是 1px 边框影响滚动，而不影响整个内容？

这是 HTML 结构...

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div class="container">
            <div class="navigation"></div>
            <div id="content-full" class="tabulator"></div>
        </div>
    </body>
</html>

【问题讨论】：

您能否以文本而不是屏幕截图的形式提供您的代码？只是一个预感：* { box-sizing: border-box; } 也许？
嗯，这解决了它wtf？这是怎么回事？您能否将其添加为答案，以便我接受。

标签： html css

【解决方案1】：

您可以通过将 box-sizing:border-box 样式规则应用于您的元素来解决此问题：

* {
   box-sizing: border-box;
}

默认情况下 content-box 被定义（仅内容），因此border-box 将使边框包含在盒子上下文中。

或者，您可以重新构造代码，使其具有一个包装元素，您可以在其中应用溢出，并将边框应用于子元素。

阅读Formatting Contexts（即块上下文）和box-sizing CSS rule

【讨论】：