textarea在flex中撑高父容器是因其作为替换元素拒绝压缩，会按内容行数自行撑开；解决需父容器设可计算高度、textarea配min-height+resize: vertical，真自适应须js监听input动态设height。
textarea在Flex中撑高父容器，是因为它默认不收缩
Flex子项默认会拉伸（align-items: stretch），但textarea是替换元素，其内部渲染逻辑会让它“拒绝压缩”——哪怕父容器高度未定义，它也会按内容行数撑开自身高度，进而把父容器顶高。这不是bug，是浏览器对表单控件的固有处理。
常见现象包括：textarea在flex-direction: column容器里占满剩余空间、在横向布局中把整行拉高、或和label重叠（尤其当父容器设了height: 100%却没留兄弟元素空间时）。
- 检查父容器是否写了
height或min-height：若为auto，Flex不生成高度，但textarea仍会按内容撑开 - 子元素写了
min-height、height或max-height？任意一个都会关闭align-items: stretch，导致Flex放弃控制，转而由textarea自己决定高度 -
textarea自身加了min-height: 0能缓解——这是关键兜底，否则它内部块级渲染逻辑会强制保留最小行高
为什么flex: 1对textarea无效，甚至让它更糟？
flex: 1本意是让子项均分剩余空间，但textarea作为替换元素，对flex-basis响应异常。尤其当父容器没设明确高度（如min-height: 100vh），flex: 1会退化为flex-basis: 0，而textarea又拒绝按0渲染，结果常表现为高度塌缩或不可预测拉伸。
- 竖向布局（
flex-direction: column）下，真正起效的是给textarea加flex: 1，但前提是父容器已有可计算高度（如min-height: 300px或min-height: 100vh） - 横向布局中，
flex: 1会让textarea抢走全部主轴空间，挤压其他输入框；此时应改用align-self: flex-start+ 显式min-height - 避免在
textarea上写height: 100%：它不会向上继承父高，反而可能因父高未定义而算出0px，还顺手禁用Flex拉伸
resize: vertical + min-height组合，才是可控撑高的底线
纯CSS无法实现“输入即增高”，但可以做到“允许用户手动拉高 + 设定基础高度”。很多人误关resize: none，结果既不能自适应，又失去控制权。
- 必须保留
resize: vertical（不是none），否则textarea永远卡在初始rows高度 -
min-height要设具体值（如min-height: 80px），不能依赖rows="3"——后者只是提示，不参与CSS盒模型计算 - 父容器需配
overflow: auto或overflow-y: auto，防止内容溢出不可见；若父容器是flex，还要确认没漏掉align-items: flex-start这类对齐控制 - Safari下，
textarea若无明确width或min-width，resize手柄可能不显示，调试时容易误判为“已禁用”
真自动增高只能靠JS，CSS只负责兜底和约束
CSS读不到文本行数，所谓“自适应高度”本质是监听input事件，取scrollHeight再赋给style.height。所有纯CSS方案都只是妥协：要么允许拖拽，要么占满空间，要么固定行数。
- 微信小程序的
auto-height="true"只响应键盘输入换行，setData设置value不会触发——这是高频踩坑点 - JS方案要注意
box-sizing: border-box和padding影响，否则scrollHeight会多算内边距 - 防抖有必要：连续输入时频繁重设
height会导致光标跳动，建议用requestAnimationFrame或setTimeout延迟更新 - 移动端软键盘弹出时，视口高度变化可能让
textarea被遮挡，此时需结合window.visualViewport做补偿
最易被忽略的是父容器的尺寸链断裂：Flex不造高度，只分空间。如果html、body没设min-height: 100vh，再精细的textarea控制都建立在流沙之上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
