如何定位触发页面溢出的元素？确认是否为footer.footer-grid

提示中提到的This element就是<footer class="footer-grid">。这类开发者工具的问题提示会直接绑定对应DOM节点，点击提示文本里的元素引用，会直接跳转到元素面板对应的footer节点位置。

• 先开启溢出标记功能：打开DevTools的设置面板（齿轮图标），在检查器（Inspector）设置项里勾选显示溢出标记（Show overflow badges），设置生效后所有触发溢出问题的元素旁会出现橙色的overflow标识，点击标识就能直接看到溢出方向、被撑破的父容器信息。
• 如果开启标记后仍找不到问题元素，直接在控制台执行以下代码，可一键扫描全页所有溢出视口的元素：

document.querySelectorAll('*').forEach(el => {
  if (el.offsetWidth > document.documentElement.clientWidth) {
    console.log('溢出元素：', el)
  }
})

执行后控制台会打印所有匹配的DOM节点，点击节点即可直接定位到对应元素位置。

• 肉眼快速排查技巧：给页面所有元素临时加1px的红色轮廓，一眼就能找到超出边界的块，直接在元素面板给全局加临时样式即可：

* {
  outline: 1px solid #f00 !important;
}

排查完成后删掉这段临时样式就行。

针对你这个带footer-grid类的元素，最常见的溢出原因是网格布局设置了固定列宽、gap间距没被容器宽度计算在内、子元素设置了负边距/固定最小宽度，或者网格列没加minmax(0, 1fr)配置导致内容撑破容器，可以优先排查这几个点。

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