输入框区域不能只设 flex: 1，因其会抢占全部剩余空间导致消息列表被顶出可视区；必须限制父容器高度（如 height: 60px 或 min-height: 60px），而输入框本身可设 flex: 1。
输入框区域为什么不能只设 flex: 1？
因为 flex: 1 会让输入框抢走全部剩余空间，把消息列表“顶出”可视区。输入区域必须是固定高度或最小高度，否则滚动逻辑就断了。
常见错误是给输入框容器（比如 .input-area）加 flex: 1，结果它无限拉伸，消息区反而看不见。
- 输入框本身（
<input>或<textarea></textarea>）可设flex: 1，但它的父容器必须限制高度 - 推荐用
height: 60px或min-height: 60px控制输入区域整体高度 - 若需多行输入，用
textarea并配合resize: none+overflow-y: auto，再用max-height: 120px防止撑爆
display: flex 下按钮和输入框怎么对齐？
默认情况下 <input> 和 <button></button> 高度不一致，尤其在 Safari 和部分安卓 WebView 中，按钮常高出 1–2px。
对齐不是靠 vertical-align，而是统一盒模型和行高：
- 给两者都加
box-sizing: border-box - 显式设置
line-height: 40px（匹配高度）或height: 40px - 移除
button的默认border和outline - 父容器设
display: flex; align-items: stretch，让子项自动等高
键盘弹出时输入框被顶起或遮挡怎么办？
iOS 和部分安卓 WebView 中，键盘弹出会压缩视口，但 vh 单位不会实时更新，导致 height: 100vh 失效甚至错位。
纯 CSS 方案下，优先用 max-height 而非 height，并留缓冲：
- 输入区域父容器设
max-height: calc(100vh - 120px)（120px 是键盘预估高度） - 避免用
height: 70vh，它在键盘弹出后仍按原视口计算 - 微信小程序必须监听
bindkeyboardheightchange，动态改max-height，否则输入框必被遮 - 不要依赖
resize事件——iOS Safari 对键盘弹出的触发极不可靠
Flex 链路里哪一层该设 overflow-y: auto？
不是消息列表容器，也不是整个聊天 wrapper，而是「消息内容区」本身——即实际存放每条 .message 的那个直接子容器。
设错位置会导致滚动失效或整页卡死：
- 错误：给
.chat-container加overflow-y: auto→ 滚动条包住导航栏+消息+输入框，体验极差 - 正确：给
.messages-list（仅包裹消息的 div）加overflow-y: auto; flex: 1 - 关键前提：它的父容器必须有
display: flex; flex-direction: column且带max-height - 必须同时设
overflow-y: auto，否则flex: 1不会收缩，内容超长时直接溢出
真正卡住人的从来不是写几行 Flex，而是某一层悄悄加了 height: 100% 或 overflow: hidden——它会无声切断整条弹性链路。动手前先用 DevTools 看 computed height，比试十次样式更准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
