内容溢出
Overflow
中级通用内容溢出（Overflow）是内容超出元素可用空间的情况，也指 CSS 对超出部分的显示方式。它帮你决定内容是继续露在外面、被裁掉，还是在限定区域内滚动；例如让聊天记录在消息面板里滚动。
你可能会说：「聊天记录越来越长，把输入框挤到屏幕外了，我想让消息区自己滚动，输入框留在原位。」
动手看看客服聊天记录面板
消息记录
您好，想咨询一下订单
好的，请问订单编号是？
订单号是 20240518
我帮您查一下进度
大概什么时候能送到？
预计明天下午送达
溢出方式 overflow
消息多到放不下时，就发生了内容溢出。切换 overflow，再调面板高度，看看超出的消息去了哪里。
auto 只在消息放不下时提供滚动；把面板调高到能装下所有消息，滚动条就不需要了。
要点内容超出容器时，我们能控制什么？
- 1
先看内容为什么放不下
一段长文本、一张大图或不断增加的消息，都可能超出容器的可用空间。我们先判断容器是否真的需要限定尺寸；如果让它自然变高就能解决问题，未必需要设置溢出行为。
- 2
决定超出部分怎么呈现
CSS 的 overflow 可以让超出部分保持可见、被裁掉，或在容器内滚动。比如消息面板高度固定时，用 auto 可以在内容超出后提供滚动；用 hidden 则会把超出的消息藏起来。
- 3
检查内容还能不能找回
裁掉内容不等于内容消失了，但用户可能看不到，也无法通过滚动找到它。处理表单、菜单等含有重要信息的区域时，我们要实际试试长内容和键盘操作，确认用户仍能读到并操作。
容易混淆的地方
内容溢出说的是内容超出容器后如何呈现，不等于盒模型：盒模型帮助你理解尺寸、内边距和边框为什么占空间。它也不等于文本截断；截断通常针对文字的显示效果，而 overflow 还会影响图片、子元素等超出部分是否可见或可滚动。
什么时候用
适合用
- 做聊天界面时，消息持续增加，但你想让输入区保持在屏幕内，可以让限定高度的消息区独立滚动。
- 做后台侧栏时，菜单项可能多到超过视口高度，可以让侧栏内容滚动，保留底部入口的可达性。
- 做固定尺寸的图片预览框时，可以裁掉超出框外的画面，让预览区保持统一尺寸。
不适合用
- 文章正文只是篇幅很长时，让页面自然向下滚动通常更合适，不必给正文另设一个滚动框。
- 手机上的卡片因为宽度太窄而挤坏布局时，先检查响应式尺寸和文字换行，而不是直接把多出的内容裁掉。
- 一段说明文字需要完整展示给用户时，可以让容器增高或文字换行，不必用溢出裁剪来维持固定高度。
练一练选一个答案，看看解释
你在做 AI 聊天页：回答越来越长，整个页面被撑高，底部输入区也跟着往下走。你希望输入区留在可见位置，历史消息仍能阅读。哪种处理更贴近目标？
让 AI 帮你做复制给 AI Agent 直接用
请调整聊天页布局：输入区留在视口底部，消息区占据剩余空间。消息内容溢出时只让消息区纵向滚动，不裁掉消息；同时检查长回答和窄屏下，输入区是否仍可操作。