resize: vertical 会撑破布局，因它仅禁用水平拖拽，用户仍可无限拉高；若未设 max-height，textarea 可能遮挡按钮、挤占其他元素或触发父容器溢出，且 safari 下需配合 min-width/max-width 和 overflow: auto 才稳定生效。
为什么写了 resize: vertical 还会撑破布局
因为 vertical 只禁用水平方向拖拽，但用户仍可无限拉高 —— 如果没设 max-height，它可能拉到遮挡按钮、挤掉其他表单项，甚至触发父容器溢出。更隐蔽的问题是：哪怕你写了 width: 100%，resize: vertical 在 Safari 下仍可能因未显式声明 min-width 或 max-width 导致宽度意外收缩或撑开。
常见错误写法：textarea { resize: vertical; height: 120px; } —— height 是初始值，不构成约束；用户一拉就失效。
- 必须配对
max-height（推荐与min-height同值，如min-height: 6em; max-height: 6em;） - 加
box-sizing: border-box，避免 padding/border 算进高度后超限 - 移动端 Safari 对
resize: vertical的尺寸响应不稳定，建议用em或rem替代px
resize: none 不生效的三个真实原因
不是浏览器不支持，而是 CSS 没真正作用到原生 textarea 元素上。最常踩的坑是：样式被第三方 UI 库覆盖、overflow 缺失、或目标元素被封装。
- Ant Design / Element Plus 的
<el-input type="textarea"></el-input>实际渲染的是带 class 的<textarea class="el-textarea__inner"></textarea>，直接写textarea { resize: none; }不命中 - Bootstrap 4+ 默认写了
textarea { resize: vertical !important; }，你的规则权重不够 - 漏了
overflow: auto—— CSS 规范强制要求resize只在overflow为auto、hidden或scroll时才生效；默认overflow: visible会让整个resize声明被忽略
验证方法：打开开发者工具 → 「Computed」面板 → 搜索 resize，确认最终计算值是不是 none。
怎样只对特定 textarea 禁用拖拽
全局重置 textarea { resize: none; } 很危险，容易误伤日志面板、调试器等需要二维调整的场景。精准控制靠选择器，但要注意优先级和封装层级。
- 按 class：
.comment-field { resize: none; overflow: auto; }，HTML 中写<textarea class="comment-field"></textarea> - 按 name 属性：
textarea[name="description"] { resize: none; overflow: auto; } - 按 id：
#bio-input { resize: none; overflow: auto; } - 慎用内联样式：
<textarea style="resize: none; overflow: auto;"></textarea>—— 调试时无法用 DevTools 临时覆盖，后续 JS 动态改样式也难维护
React/Vue 中动态切换时，别只改 element.style.resize，框架组件内部可能有更高权重的 CSS 规则；推荐用 class 切换或 style={{ resize: isFixed ? 'none' : 'vertical' }} 直接透传。
Safari 和 Android WebView 的兼容性陷阱
现代桌面浏览器基本没问题，但两个真实存在的坑：Safari 要求元素有明确尺寸约束才渲染手柄（哪怕你设了 resize: both），而老版 Android WebView（尤其 4.x 系统自带）可能直接忽略 resize: none。
- Safari 需同时满足：有
width（或min-width/max-width）、height（或min-height/max-height）、overflow: auto、resize: none，否则右下角手柄可能一闪即逝 - Android 4.4 WebView 已知不支持
resize，真机测试比模拟器可靠得多 - IE 10 及更早版本完全不支持，但 2026 年基本可忽略；若真要兜底，JS 拦截 mousedown 的方式成本远高于收益，不建议写
真正容易被忽略的不是怎么关掉拖拽，而是关掉之后——滚动条出现时机、内容截断提示、移动端 touch 区域是否仍能正常唤起键盘。这些都得靠 overflow、max-height 和 JS 补充逻辑来配合，resize: none 只负责把手柄拿掉。
