此元素导致 Firefox 中的元素溢出答案

【问题标题】：This element is causing an element to overflow in Firefox此元素导致 Firefox 中的元素溢出
【发布时间】：2022-01-27 11:14:50
【问题描述】：

我不使用 Bootstrap 或 reset.css/reboot.css，我正在尝试使用通用 css 构建网站。我正在做一些非常基本的事情，但我到处都得到“这个元素导致一个元素溢出”。我已经有一段时间没有在没有任何 css 框架的情况下进行布局了，而且我找不到关于这个问题的任何信息。即使是br 也会导致溢出！这是什么？我没有看到任何污点，一切看起来都和我预期的一样。这条消息很烦人。

我检查了更多，发现图像导致了这种情况。但是我有

.img-responsive, .responsive {
    height: auto;
    max-width: 100%;
}
.img-thumbnail, .thumbnail {
    padding: 0.25rem;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    box-sizing: border-box;
}

如果我删除这张图片，下面的一些元素的溢出消息会消失。谁能告诉我这是怎么回事？

【问题讨论】：

标签： css firefox

【解决方案1】：

来自MDN：

滚动容器是通过应用溢出来创建的：滚动到容器，或者溢出：自动当有足够的内容导致溢出时。 Firefox DevTools 可以轻松发现可滚动元素和导致溢出的任何元素。

在 HTML 窗格中，可滚动元素旁边有滚动标志...

您可以切换滚动徽章以突出显示导致溢出的元素，并根据需要扩展节点以使节点可见...

您还会在导致溢出的节点旁边看到一个溢出标记。

因此，如您所见，如果容器中的内容溢出，则会用overflow 进行标记。要么调整内容不溢出，要么调整容器本身以允许内容不溢出。您记下的 DevTools 标记可用于识别哪些项目溢出了哪个容器。

【讨论】：

【解决方案2】：

这会有所帮助。

html {
    width: 100%;
}

【讨论】：

【解决方案3】：

我建议在 html 中创建一个重置

/* ------------ Reset CSS ------------ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。