为什么Flex容器里的元素在移动端显示时会超出屏幕宽度？

问题出在 min-width: 100px 和 flex: 1 冲突了。

当按钮设置了 min-width: 100px，而容器宽度不够时，Flex 会优先满足每个子元素的最小宽度，导致实际宽度大于 flex: 1 计算出来的值，所以第三个按钮就挤出去了。

直接用 flex: 1 1 0% 替代 flex: 1，并去掉 min-width：

.nav {

  display: flex;

  justify-content: space-between;

  width: 100%;

}

.nav button {

  flex: 1 1 0%;

  padding: 12px;

}

flex: 1 1 0% 的意思是：基础宽度为 0，允许收缩， growth factor 为 1，这样三个按钮就会严格按 1:1:1 分配容器宽度，不会被 min-width 拖累。

如果一定要限制最小宽度（比如防止文字被压太窄），用 flex-basis: 0% + min-width 时，记得加 box-sizing: border-box，因为 padding 也会占宽度：

.nav button {

  box-sizing: border-box;

  flex: 1 1 0%;

  min-width: 80px;

  padding: 12px;

}

不过一般导航栏按钮根本不需要 min-width，直接用 flex: 1 1 0% 就行，简单粗暴有效。

问题出在 min-width 和 padding 上，这两个属性会让按钮的实际宽度超出你预期的等分宽度。省事的话，把 min-width 去掉，然后给 .nav 加个 box-sizing: border-box，顺便确认下 html 和 body 的宽度是不是 100%。

代码调整如下：

.nav {

  display: flex;

  justify-content: space-between;

  width: 100%;

  box-sizing: border-box;

}

.nav button {

  flex: 1;

  padding: 12px;

}

如果还不行，检查一下是否有默认样式或者外边距影响，加个全局样式重置更省心：

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}