排版溢出怎么查：从盒模型到最小宽度

手机页面出现横向滚动时，最容易做的处理是给整个 body 加上 overflow:hidden。这样可能把问题藏起来，也可能让按钮、表格和键盘焦点一起被截断。

本篇目标： 按顺序定位宽度来源，用针对性的规则修复布局，而不是直接裁掉溢出的内容。

先找到真正超宽的元素

从视口宽度开始检查，观察哪一个容器的边界先超出了可用空间。区分是元素本身过宽，还是内部内容没有合适的换行和滚动方式。

常见来源包括固定宽度图片、很长的连续文本、代码块、表格，以及 Flex 或 Grid 子项的自动最小尺寸。修改之前先缩小到一个最小复现，往往比同时调整多个选择器更快。

给可收缩的子项明确边界

Flex 或 Grid 中的子项可能保留基于内容的最小尺寸。需要让它收缩时，可以根据布局设置 min-width:0；网格轨道也可用 minmax(0,1fr) 表达允许缩小的分配方式。MDN：min-width

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
}
.main-column { min-width: 0; }
.long-text { overflow-wrap: anywhere; }

不要把这些规则无差别加到所有元素。某些控件需要保持最小可操作宽度，强行压缩反而会使它难以使用。

根据内容选择处理方式

普通长文本可以换行；代码通常更适合保留格式并横向滚动；宽表格需要独立滚动容器；图片则应限制最大宽度并保留比例。不同内容没有必要采用同一种溢出处理。

验证不只用一个手机宽度

检查窄屏、平板和大屏，也要放大文字、替换成长标题、让按钮标签变长。观察内容有没有被截断，键盘聚焦时能否看见完整控件，滚动区域是否容易发现。

最后再移除调试时增加的临时边框和全局隐藏规则。一个可靠的布局应该能够解释自己为什么适配，而不是依赖某个恰好没有触发问题的屏幕尺寸。