Figma设计的网页导航菜单在浏览器中无限右移无法适配如何修复

• 全局样式兜底限制
  先给页面根元素统一添加溢出限制和盒模型规则，从全局层面避免宽度溢出：

html, body {
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
}

该规则会限制页面最大宽度不超过浏览器视口宽度，同时统一所有元素的盒模型计算逻辑，避免内边距、边框额外撑宽容器导致溢出。

• 导航栏元素专项排查
  问题出在导航菜单实现后出现，优先检查导航相关样式：

  • 确认没有给导航栏或者内部子元素设置远超常规视口的固定宽度，比如width: 1920px这类写法，替换为max-width: 100%配合rem、vw等自适应单位使用
  • 检查导航栏子元素是否设置了负的左右外边距，绝对定位元素是否未做位置限制，这类情况都会导致元素偏移到父容器外撑宽页面
  • 如果导航用了flex布局，给flex容器添加flex-wrap: wrap属性，避免子元素总宽度超过容器宽度时强行在同一行排列导致溢出；如果用了grid布局，检查列宽是否用了固定值，替换为minmax(最小宽度, 最大宽度)的自适应写法

• 溢出元素快速定位
  如果上述方案都未解决问题，可以在浏览器控制台执行以下代码，直接定位到宽度超过视口的元素：

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

根据控制台输出的元素针对性修改对应样式即可。

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