textarea默认resize: both会撑破flex/grid父容器，必须同时设resize: none、box-sizing: border-box、overflow-y: auto，并在flex容器中加align-self: flex-start防拉伸。
textarea resize 默认行为会撑破父容器
直接设 resize: both（默认值）后，用户拖拽右下角，textarea 的 width 和 height 会脱离 CSS 控制，变成内联样式。父容器若用 flex 或 grid 布局，子项尺寸突变会触发重排，导致父容器被强行撑大、换行、甚至溢出横向滚动条。
必须同时禁用拉伸 + 锁死盒模型计算方式
只写 resize: none 不够，因为 textarea 默认仍是 content-box，padding 和 border 会叠加在你写的 width/height 外面，实际尺寸仍不可控。
- 显式加
box-sizing: border-box：让width和height包含padding和border - 加
resize: none：彻底移除拖拽手柄，杜绝手动破坏 - 加
overflow-y: auto：内容超长时才出现滚动条；设hidden会丢内容，设scroll则永远占位 - 避免用
rows控制高度：它依赖字体和 UA 行高，Chrome/Firefox 渲染偏差可达 10px
父容器是 flex 时，textarea 还需防“自动拉伸”
即使 textarea 自身尺寸锁死了，在 display: flex 容器里，它仍可能被默认拉伸填满整行（尤其当父容器有 align-items: stretch），这会覆盖你写的 height。
- 加
align-self: flex-start：让它按自身height布局，不随父容器拉伸 - 确保父容器没设
min-width: 0漏掉：flex 子项若含长文本或 URL，没这个声明也可能撑破 - 别信
height: 100%：它在 flex 容器中常失效，优先用固定值或min-height+max-height
自适应高度场景下，CSS 本身做不到真正“安全”
field-sizing: content 是 Chrome 123+ 实验性属性，看似能自动撑高，但它：
— Safari/Firefox 完全不支持
— 在 React/Vue 中容易导致 v-model 或 useState 同步失败
— 空内容时高度为 0，必须配 min-height，否则表单字段“消失”
生产环境更稳的路径是 JS + scrollHeight：
监听 input 事件，读取 textarea.scrollHeight，再赋给 style.height，并限制在 min-height 和 max-height 范围内。CSS 只负责兜底样式，不承担尺寸逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
