textarea 默认可双向缩放且不受 rows/CSS 尺寸约束，撑破布局主因是父容器缺兜底；resize: none 失效常因样式未命中或被 !important 覆盖；rows="1" 仅为提示，非强制单行，需配合 resize: none、height: auto 等组合控制。
因为 textarea 默认 resize: both，且该行为不受 rows 或 width/height CSS 声明约束——用户拖拽直接修改元素的盒模型尺寸，父容器又没做溢出或尺寸兜底，自然就撑破了。
为什么 resize: none 有时也不起作用？
最常见的是样式没命中目标元素。第三方 UI 库（比如 Element Plus、Ant Design）常把 textarea 封装在多层 <div> 中，你写的 textarea { resize: none; } 可能根本没匹配到真实渲染的那个元素；或者框架 CSS 用了 !important，比如 textarea { resize: vertical !important; }，你的规则就被覆盖了。
排查方法：
- 打开浏览器开发者工具，选中
textarea元素，看「Computed」面板里resize的最终值是不是none - 优先用内联样式：
<textarea style="resize: none;"></textarea>，不用加!important - 检查父容器是否设置了
overflow: visible—— 如果是，resize会彻底失效
resize: vertical 看似安全，其实更危险
很多人以为只允许拉高就没事，但实际中：vertical 仍会突破容器宽度约束，尤其当父容器用 flex 或 grid 布局时，拉高后可能触发换行、挤压相邻元素，甚至让表格列宽错乱。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
关键点：
-
resize: vertical不锁宽度，只是隐藏水平手柄，但用户仍可通过鼠标斜向拖拽轻微改变宽度 - 若没设
max-height，用户一拉就可能遮住按钮或 footer - Safari 要求元素有明确宽度约束（如
width或min-width），否则连手柄都不显示，导致调试时误判为“已禁用”
rows="1" 为什么挡不住多行？
rows 是提示性属性（hint），不是强制约束。它只参与初始渲染计算，后续完全被 CSS 盒模型接管。哪怕你写了 rows="1"，只要存在以下任一情况，就会显示多行：
- CSS 设置了
height、min-height或过大的padding -
line-height或font-size被放大，单行实际高度远超默认值 - 用户已手动拖拽过，DOM 的
style.height被 JS 或浏览器写入，覆盖了所有声明
真正要固定单行，得组合控制：resize: none + height: auto + white-space: nowrap + overflow-x: auto；或者直接换用 <input type="text">。
布局被撑破的根本原因不是 resize，而是缺乏容器兜底
很多开发者只盯着 textarea 本身，却忽略父级容器没有设置 max-height、overflow 或弹性约束。比如表格单元格、flex 子项、卡片内容区，一旦 textarea 高度失控，父容器又没设 min-height 或 align-items: flex-start，整个布局就塌了。
最稳妥的做法是双保险：
- 子元素：用
resize: none+ 显式height/max-height - 父容器：加
overflow: hidden或overflow-y: auto，并确保其自身尺寸可预测（比如不依赖fit-content）
