Flexbox fixed导航栏设置width:100%超出视口问题排查

你遇到的width: 100%设置后仍然溢出是非常典型的前端布局新手坑，问题基本逃不出下面几个范围：

• 未重置盒模型：默认的content-box盒模型规则下，你给元素设置的width: 100%仅计算内容区宽度，后续给导航栏加的左右内边距、边框宽度都会额外叠加在100%宽度之外，直接导致总宽度超出视口
• 未清除浏览器默认边距：所有浏览器默认都会给<body>标签添加8px的外边距，如果你的fixed导航栏没有显式指定贴齐视口边缘，就会受这个默认边距影响产生位置偏移
• fixed定位缺省偏移参数：只写position: fixed; top: 0; width: 100%但没加left: 0时，导航栏会保留它在正常文档流里的初始左偏移，不会自动贴到视口最左边，右侧自然就会超出视口边界
• Flex子项撑破父容器：如果导航栏里的logo、菜单项、SVG资源设置了固定宽度/最小宽度，且所有子项宽度总和超过父容器宽度，又没开启收缩、换行规则，子项会直接把父容器撑宽，完全无视你给父级设置的width: 100%规则

首先在CSS文件最顶部加全局重置，这是几乎所有前端项目的标配写法，从根源规避盒模型和默认边距问题：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

然后修改导航栏的定位规则，比单纯写width: 100%更稳妥的写法是直接用左右偏移撑满视口，完全不会受盒模型、边距影响：

/* 把选择器替换成你项目里实际的导航栏选择器即可 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0; 
  /* 加了left和right属性后，不需要再写width:100%，元素会自动撑满视口宽度 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 其余样式比如高度、背景色、内边距可以正常添加，不会再撑宽容器 */
}

最后检查Flex内部子项的布局规则：

• 不需要换行的桌面端场景下，给子项加上flex-shrink: 1，允许空间不足时自动收缩，不会硬撑父容器
• 移动端适配需要换行的场景，给导航栏加flex-wrap: wrap即可
• 不要给导航内的SVG、logo元素设置超过视口宽度的固定最小宽度

打开浏览器F12开发者工具，选中导航栏元素，直接看右侧的盒模型面板，就能直观看到到底是padding、border、margin还是内部子元素把总宽度撑到了视口之外。临时给导航栏加outline: 2px solid red（outline不占布局宽度，不会影响原有布局），可以快速看清导航栏的实际边界，判断溢出方向。

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