textarea在flex-column中高度异常的根源是父容器未正确设置flex属性及子项伸缩行为；需父容器设display:flex+flex-direction:column，textarea加flex:1，发送按钮加flex-shrink:0，并配合min-height、height:auto等样式与三行js动态调整逻辑。
flex-direction: column 下 textarea 高度被压扁或撑满整行
常见现象是：输入框在竖向布局里高度为 0，或者直接顶满整个容器、盖住发送按钮。这不是 textarea 写错了，而是父容器没设对方向，或子项没控制好伸缩行为。
关键不是调 textarea 自身的 height，而是让它的父级成为真正的 flex 容器：
- 父容器必须设
display: flex+flex-direction: column -
textarea加flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 发送按钮加
flex-shrink: 0，防止被压缩变形 - 避免给
textarea设height: 100%或width: 100%，它会和flex规则冲突
textarea 输入内容增多后不自动增高，只出现滚动条
这是默认行为，textarea 是替换元素，不响应 height: auto 的常规计算。纯 CSS 方案只能做到“允许伸缩”，不是“输入即变高”。
基础样式组合必须包含：
-
min-height: 80px（约 4 行，满足移动端最小点击区域） -
height: auto（必需，否则 JS 动态设高会不准） -
resize: vertical（禁用resize: none，很多 UI 框架默认加这个） -
overflow: hidden（配合 JS 使用，防滚动条闪现）
JS 动态逻辑只需三行，且必须按顺序执行：
const ta = document.querySelector('textarea');
ta.addEventListener('input', () => {
ta.style.height = 'auto';
ta.style.height = ta.scrollHeight + 'px';
});
Flex 布局中顶部消息区撑开、底部输入框被遮挡
当聊天记录越来越多，顶部 .view 区域不断拉高，底部固定高度的输入框就可能被挤出视口——这不是内容太多的问题，而是 Flex 子项没释放收缩权限。
根本原因是 min-height: auto（默认值）阻止了压缩。触发弹性收缩的关键动作只有一个：
- 给顶部消息容器（如
.view）加overflow: auto或overflow-y: auto - 这会隐式将
min-height重置为0，Flex 引擎才允许它压缩到最小高度 - 不需要额外写
min-height: 0，overflow非visible就已足够 - 若用了
flex-direction: column-reverse（消息倒序），同样适用该规则
移动端键盘弹出后输入框被顶出可视区
iOS 和 Android 键盘弹起时，100vh 失效、视口高度突变，导致 flex 容器误判剩余空间，输入框位置错乱甚至不可见。
最轻量可靠的修复方式是用 scroll-margin-bottom，但它需要两个前提同时满足：
- 输入框本身有
id或可被聚焦（如tabindex="0"） - 页面滚动容器是
document.documentElement或明确设置了overflow: auto的祖先元素 - 在聚焦时浏览器才会触发滚动定位，所以要确保
textarea能获得焦点
示例写法：textarea { scroll-margin-bottom: 80px; }，数值建议略大于输入框自身高度加安全间距。
真正麻烦的是 Safari 的 visualViewport 事件延迟，如果发现首次聚焦后定位不准，加个 setTimeout(() => el.scrollIntoView(), 300) 更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
