overflow 的工作方式与可见范围

单独设置一个方向的处理方式时，浏览器会分别考虑横向和纵向边界。横向内容常见于长链接、表格、代码行和图片，纵向内容👍常见于弹窗、下拉面板、聊天记录与文章摘要。

弹窗正文可以使用“最大高度加自动滚动”的💫组合，例如将最大高度限制在视口高度的一定比例内，并设置属性值为 auto。移动端还应预留上下内边距，避免最后一段文字紧贴底部按钮。

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

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

CSS 溢出故障应先定位实际超出边界的元素，再决定修复方式。直接在多个祖先元素上连续添加 hidd📌en，通常只能暂时消除视觉现象。

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

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

可访问的滚动区域需要具备可识别的用途、足够的尺寸和明确的操作反馈。只有一条很窄的横向滚动区域，用户可能不知道其中还有完整内容。