resize: vertical 仍会撑破布局，因其仅禁用水平拖拽，不限制高度增长；height 是初始值而非上限，须配对 min-height 和 max-height（如均为 6em）并设 box-sizing: border-box 才能锁定尺寸。
resize: vertical 为什么还会撑破布局
因为 resize: vertical 只禁用水平拖拽，不约束高度增长——用户一拉就突破初始 height，而 height 本身只是初始值，不是上限。常见错误写法：textarea { resize: vertical; height: 120px; }，这等于没设防。
真正起作用的必须是尺寸边界组合：
-
min-height和max-height设为相同值（如min-height: 6em; max-height: 6em;），才能锁死可拉范围 - 加上
box-sizing: border-box，避免padding和border算进高度后意外超限 - Safari 下尤其敏感：若没显式声明
min-width或max-width，即使width: 100%也可能因重排导致宽度跳变
textarea[name="description"] { resize: none } 不生效的三个原因
不是浏览器不支持，而是 CSS 没真正作用到渲染后的 <textarea></textarea> 元素上。最常踩的坑有：
- 样式被 UI 库覆盖：Ant Design 渲染出的是
<textarea class="el-textarea__inner"></textarea>，直接写textarea { resize: none; }不命中 - 权重不够：Bootstrap 4+ 默认加了
!important，你的规则得带更具体的选择器或也加!important - 漏了
overflow：CSS 规范强制要求resize只在overflow为auto、hidden或scroll时才生效；默认overflow: visible会让整个声明被忽略
验证方法：打开 DevTools →「Computed」面板 → 搜索 resize，确认最终计算值是不是 none。
立即学习“前端免费学习笔记（深入）”；
如何只对特定 textarea 启用 vertical 拉伸
全局写 textarea { resize: vertical; } 风险很大，容易误伤日志面板、调试输入框等需要二维调整的场景。精准控制靠选择器，但要注意封装层级和优先级：
- 按 class：
.comment-field { resize: vertical; overflow: auto; max-height: 12em; }，HTML 中写<textarea class="comment-field"></textarea> - 按 name 属性：
textarea[name="bio"] { resize: vertical; overflow: auto; } - 慎用内联样式：
<textarea style="resize: vertical; overflow: auto;"></textarea>—— 调试时无法用 DevTools 临时覆盖
移动端 Safari 对 resize: vertical 的响应不稳定，推荐用 em 或 rem 替代 px 控制 max-height，避免视口缩放时失准。
div 实现 horizontal 拉伸要满足什么条件
resize 不只属于 textarea，任何块级元素都能用，但有两个硬性前提：
- 必须是块级元素（
display: block或类似） -
overflow计算值不能是visible—— 常见写法是overflow: hidden或overflow: auto
例如实现侧边栏左右拖拽：
.sidebar-resizer {
resize: horizontal;
overflow: hidden;
min-width: 200px;
max-width: 400px;
}
注意：Firefox 对 resize: horizontal 支持有限，右下角拖拽区极小，且不响应 ::-webkit-scrollbar 扩展；实际项目中建议对 Firefox 降级为点击切换预设宽度 + transition: width。
真正容易被忽略的是：resize 拖拽手柄的位置和大小，由 ::-webkit-resizer 和滚动条样式共同决定，但这些仅限 WebKit 内核，跨浏览器一致性差——别指望纯 CSS 实现全平台一致的拉伸体验。
