flex、grid 和响应式页面中的溢出排查

移动端页面出现底部横向滚动条时，不应第一时间给 body 设置隐藏。全局裁切可能掩盖真正的宽度错误，还可能让键盘用户和辅助技术无法访问被移出视口的内容。

页面出现滚动条、裁切或空白时的排查顺序

overflow 是 CSS 中用于处理内容超出容器边界的属性💪，主要决定超出部分是继续显示、被裁💡剪，还是通过滚动查看。它适用于固定高度的卡片、横向表格、弹窗内容区、代码展示框、图片容器以及响应式页面。

图片使用固定比例容器时，可以结合 object-fit 控制裁切方式。cover 会填满容器并裁掉部分🎆画面，contain 会尽量完整显示图片但可能留下空白，实际选择应根据图片是否需要完整阅读决定。

Grid 子项出现溢出时，问题经常来自轨道的最小尺寸。使用一份占满剩余空间的列时，minmax(0, 1fr) 往往比单独使用 1fr 更能允许内容收缩，但仍需处理长文本和不可缩小控件。

五种属性值分别适合什么场景

CSS 内容溢🎯出问题通常不是单纯把超出部分隐藏就能解决。页面需要根据内容是否必须完整阅读、是否允许用户横向操作、是否影响键📚盘访问和移动端布局，选择 visible、hidden、clip、scroll 或 auto 等不同方案。

聊天记录列表需要考虑滚动位置。新消息不断增🔥加时，脚本应根据用户是否🎇位于底部决定是否自动滚动；用户正在查看历史消息时，不应因为新增内容强行跳回末尾。

Flex 子项出现横向溢出时，常见原因是子项默认最小尺寸阻止了收缩。长单词、不可换行文本、图片或固定宽度组件会迫使父容器变宽。