overflow 与滚动容器
解释 overflow 为什么不只是裁剪内容，以及滚动容器在布局里常见的边界问题。
#type / concept
#status / growing
#resource / css
#tech / dev / frontend
[!info] related notes
- 所属 MOC: CSS MOC
- 上位主题: 文档流、display 与定位
- 实战场景: content-overflow-container-solutions, remove-outer-scrollbar
overflow 与滚动容器
overflow 看起来像一个“超出就裁掉”的属性，但在实际布局里，它经常同时影响滚动、裁剪、布局隔离和可见区域。
一句话定义
overflow 决定内容超出盒子时该怎么处理，也常常顺带决定某个元素是否会变成滚动容器。
常见值
visible
默认值，超出部分仍然可见。
hidden
超出部分裁掉，不显示滚动条。
auto
需要时才出现滚动条。
scroll
始终提供滚动容器能力，通常也会保留滚动条区域。
为什么它在布局里这么重要
因为它不仅决定“超出怎么显示”，还经常决定：
- 哪个区域负责滚动
- 是否出现双滚动条
- 某些定位或粘性行为为什么失效
- 为什么一个容器突然“顺手解决”了布局问题
最常见的实战场景
- 固定头部 + 内容区滚动
- 弹窗内部滚动
- 侧栏滚动而页面不滚
- 卡片内容超长裁剪
为什么 overflow: hidden 经常像万能药
因为它除了裁剪内容，还常伴随布局边界变化，所以有时会“顺手”解决浮动包裹或奇怪溢出问题。
但如果不理解原因，只会留下更多副作用，比如：
- 内容被误裁剪
- 阴影被截断
- 可访问性和交互区域出问题
最短记忆方式
overflow 不只是裁剪开关，它经常还在决定“谁来滚、谁被裁、谁形成新的边界”。