基于Flexbox的网站移动端内容水平溢出问题排查与解决

这种Flexbox在移动端出现水平溢出的问题我经手过很多次，结合你已经设置了viewport标签的情况，大概率是下面几个常见原因，对应的解决方法也给你梳理清楚了：

1. 子元素固定宽度/最小宽度超出容器 #

Flex容器默认会尝试让子元素收缩适配，但如果子元素设置了固定宽度（比如width: 320px）或者最小宽度（min-width: 300px），当移动端视口宽度小于这个值时，子元素就会撑破容器，导致水平溢出。

• 解决方法：
  • 把固定宽度替换为flex: 1（让子元素占满剩余空间）或者width: 100%；
  • 如果必须保留最小宽度，给Flex容器添加overflow-x: auto，让内容可以横向滚动；
  • 给子元素加上max-width: 100%，限制它的最大宽度不超过父容器。

2. 盒模型导致的padding/margin溢出 #

很多时候子元素设置了width: 100%再加上左右padding/margin，会触发“盒模型溢出”——因为默认的box-sizing: content-box下，元素的宽度只包含内容区，padding和margin会额外占据空间，导致总宽度超出容器。

• 解决方法：给全局或目标元素设置box-sizing: border-box，这样元素的宽度会包含padding和border，不会超出容器。推荐在全局样式里添加：

* {
  box-sizing: border-box;
}

3. Flex容器未限制宽度或未开启换行 #

如果Flex容器本身没有设置width: 100%或max-width: 100%，它可能会被子元素撑开超出视口；另外Flex默认是flex-wrap: nowrap，如果子元素数量多、总宽度超过容器，就会强行排在一行导致溢出。

• 解决方法：
  • 给Flex容器添加width: 100%，确保它的宽度不超过视口；
  • 如果子元素需要换行，设置flex-wrap: wrap，同时给子元素设置合适的flex-basis（比如flex-basis: 100%让移动端独占一行）或者宽度。

4. 长文本/未限制宽度的图片溢出 #

Flex容器内的长文本（比如无空格的英文、数字串）或者未设置最大宽度的图片，不会自动换行或收缩，很容易撑破容器。

• 解决方法：
  • 针对长文本：给元素添加word-break: break-all或overflow-wrap: break-word，强制文本换行；
  • 针对图片：设置max-width: 100%; height: auto;，确保图片自适应容器宽度，不会溢出。

5. 绝对定位元素脱离约束 #

如果Flex容器内有绝对定位的元素，它的宽度计算会脱离Flex布局的约束，可能会超出视口范围。

• 解决方法：给绝对定位的元素设置left: 0; right: 0;，让它的宽度受父容器限制；或者添加max-width: 100%;，强制它不超出容器宽度。

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