textarea 高度不随内容自适应需用 min-height + resize: vertical + overflow: auto 组合；Flex 布局下应调整父容器为 column 方向并设 textarea flex: 1；真自动撑高须 JS 监听 input 动态设置 height。
textarea 高度不随内容自适应？用 resize 和 min-height 组合控制
默认 textarea 不会自动撑高，用户输多行后出现滚动条，但视觉上框体高度固定。单纯设 height: auto 无效，因为 textarea 是替换元素，不响应常规高度计算。
真正起效的是：min-height 定义基础高度，resize: vertical 允许手动拉伸，再配合 overflow: auto 防止内容溢出不可见。
-
min-height推荐用min-height: 80px（约 4 行），避免过小导致输入时遮挡光标 - 禁用
resize: none—— 这是很多 UI 框架（如 Ant Design）默认加的，会直接封死自适应可能 - 不要设
height: 100%或flex: 1在textarea自身上，它在 Flex 容器里会压缩失效
Flex 布局下 textarea 被压扁或撑满整行？检查父容器的 align-items 和 flex-direction
常见现象：输入框组横向排列时，textarea 高度变成 0；竖向堆叠时，它又占满剩余空间，盖掉按钮。
根本原因是 Flex 的默认对齐和伸缩行为与文本域特性冲突。关键不是改 textarea，而是调父级容器：
立即学习“前端免费学习笔记（深入）”；
- 竖向布局（推荐）：父容器设
display: flex+flex-direction: column，再给textarea加flex: 1，此时它才真正响应剩余空间 - 横向布局需谨慎：若和
input并排，textarea必须显式设align-self: flex-start，否则align-items: stretch（默认值）会强行拉高 - 避免在
textarea外层再套一层div且没设height—— Flex 会忽略无尺寸约束的中间层
需要“真实自适应”（输入即增高，无滚动条）？只能靠 JS 监听 input 事件重设 height
CSS 无法读取内容行数，所谓“自动撑高”本质是 JS 根据 scrollHeight 动态调整 style.height。纯 CSS 方案只做到“允许伸缩”或“占满剩余空间”，不是输入即变。
最小可用脚本逻辑：
const ta = document.querySelector('textarea');
ta.addEventListener('input', () => {
ta.style.height = 'auto';
ta.style.height = ta.scrollHeight + 'px';
});
- 必须先设
height: auto再读scrollHeight，否则值不准 - 记得加
overflow: hidden，否则滚动条闪现 - 移动端 Safari 对
scrollHeight计算有延迟，可加setTimeout微调，但多数场景无需 - 如果用了框架（如 React），别直接操作
style.height，优先走 state 控制内联样式
IE11 或旧版 Safari 下 flex + textarea 布局错乱？降级方案用 display: table
IE11 不支持 flex: 1 在 textarea 上生效，旧 Safari（min-height 在 flex 子项中解析异常。这时候别硬扛 Flex。
兼容性兜底思路：用语义更稳的 display: table 模拟弹性布局：
- 外层
div设display: table; width: 100%; height: 200px -
textarea设display: table-cell; vertical-align: top - 配合
min-height和resize，效果接近 Flex - 注意：此方案下
textarea无法响应父容器的flex-grow，适合固定高度容器场景
真正难处理的不是技术选型，而是混合使用了 CSS-in-JS 库、UI 组件库和自定义样式时，textarea 的 box-sizing 被多次覆盖，导致 padding 和 border 算进高度里——这种细节查起来最费时间。
