如何解决移动端Flex导航栏溢出导致页面横向滚动问题

问题根源 #

原CSS存在两个核心问题导致移动端溢出：

• header *选择器覆盖范围太广，给header下所有子元素都强制添加了flex布局、左右3.5vw内边距，打乱了导航列表的正常布局；再加上flex-wrap: nowrap强制不换行，移动端空间不足时直接溢出。
• 未设置页面禁止横向滚动的规则，也没有给header做合理的容器约束。

修复后的完整CSS代码 #

/* 全局禁止横向滚动，清除默认边距 */
body {
  overflow-x: hidden;
  margin: 0;
}

/* 导航栏容器样式 */
header {
  max-width: 650px; /* 限制最大宽度 */
  margin: 0 auto; /* 水平居中 */
  background-color: red;
  padding: 10px 3.5vw; /* 上下内边距固定，左右用vw适配不同屏幕 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* 移动端空间不足时自动换行 */
}

/* 导航链接基础样式 */
header a {
  color: #cacaca;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

/* 导航列表样式 */
.nav_links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5vw; /* 列表项间距用vw适配 */
}

/* 链接 hover 效果 */
.nav_links li a {
  transition: all 0.3s ease 0s;
}

.nav_links li a:hover {
  color: #ffffff;
}

关键修复说明 #

• 给body添加overflow-x: hidden，彻底阻止页面横向滚动。
• 废弃header *这种全局污染的选择器，把样式拆分到header容器和具体子元素上，避免干扰内部布局。
• 将flex-wrap改为wrap，让导航项在移动端自动换行，解决空间不足的溢出问题。
• 用gap控制导航项间距，替代可能导致溢出的padding/margin设置。
• 清除所有元素的默认margin和padding，消除浏览器默认样式的干扰。

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