<p>height: 100% 失效因父容器无明确高度，需用 max-height + flex: 1 组合；flex 链路须闭合：wrapper 设 flex-column 和 max-height，消息区设 flex: 1 + overflow-y: auto，输入框设固定高；键盘弹出时优先用 max-height: 70vh 或 calc(100vh - 120px)，并配合 JS 动态调整。</p>
不能只靠 height: 100% 或 flex: 1 —— 容器必须有明确的可用高度来源，否则自动适配会失效。
为什么 height: 100% 常常不生效？
父容器没设高度时，height: 100% 实际计算结果是 0px。CSS 百分比高度依赖于**已知高度的祖先元素**，而 HTML body 默认没有固定高度。
- 常见错误：直接给聊天窗口设
height: 100%，但外层 wrapper 只写了display: flex没配height或max-height - 移动端尤其明显：视口高度变化（如键盘弹起）后，
100%不会自动重算 - 更稳妥的做法是用
max-height+flex: 1组合，而非纯百分比
flex: 1 在聊天窗口中怎么用才对？
关键不是单独加在消息容器上，而是整套 flex 链路要闭合：wrapper → 内容区 → 消息列表 → 输入框，每一环都影响高度分配。
- wrapper 必须设
display: flex; flex-direction: column;和明确的max-height（比如max-height: 400px或max-height: 70vh） - 消息列表区域（即实际滚动区）设
flex: 1; overflow-y: auto;，它才会撑满剩余空间 - 输入框区域不要设
flex: 1，否则会抢走消息区高度；应设固定height或min-height - 避免在中间层加
height: 100%—— 它会打断 flex 的自然伸缩逻辑
如何应对键盘弹出导致的视口高度变化？
在 iOS 和部分安卓 WebView 中，键盘弹出会压缩视口高度，但 vh 单位不会实时更新，导致聊天窗口被顶出可视区。
立即学习“前端免费学习笔记（深入）”；
- 优先用
max-height: 70vh而非height: 70vh，留出缓冲空间 - 监听
resize事件（注意：iOS Safari 对键盘弹出的resize触发不一致），必要时用 JS 更新容器高度 - 微信小程序需额外处理：
bindkeyboardheightchange回调中动态调整max-height，否则输入框会被遮挡 - 纯 CSS 方案下，
min-height: calc(100vh - 120px)比固定vh更鲁棒（120px 约为键盘预估高度）
真正难的不是写几行 CSS，而是判断哪一层该设高度、哪一层该交由 flex 分配——一旦某层意外设置了 height 或 overflow: hidden，整个链路就卡死。动手前先用浏览器 devtools 检查每层 computed height 是否符合预期，比反复改样式更省时间。
