使用溢出控制时需要保留的可访问性

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

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

浏览器开发者工具可以帮助识别宽度异常的节点。逐个取消父级限制、边框、内边距和定位样式，通常比反复修改页面根节点的滚动设置更容易找到源头。

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

auto 通常是内容区域的稳妥选择，但 auto 不会自动解决所有移动端体验问题。横向滚动区域应有清晰边界，表格或代码框还应避免让整页跟着横向移动。

固定高度容器、图片和卡片的实际用法

容器没有明确的宽度、高度、最大宽度或最大高度时，溢出控制可能不明显。普通块级📚元素通常会随着内容增加而变高，因☀️此只有横向内容、固定高度区域或受到 flex、grid 约束的元素，才更容易出现明显的裁切与滚动。

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

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

图片容器适合使用 hidden 处理视觉裁切，尤其是缩略图、头像和带圆角的封面。图片本身还应设置最大宽度，避免原始尺寸过大撑开页面。

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

hidden 与 clip 的区别在于交互能力和布局语义。hidden 常用于建立可裁切的容器，也可能形成滚动容器；clip 更强调禁止滚动的裁剪效果。需要保留但暂时不展示的长文本，不应仅依靠这两个值处理。

卡片内容不适合随意使用 hidden 截断正文。商品名称、价格、按钮和重要提示被裁切后，用户可能无法理解卡片含义；需要限制摘要长度时，应优先使用明确的文本截断方案，并保留查看完整内容的入口。