resize: both 无效主因是 overflow 未设为 auto/scroll/hidden 且元素非块级；须配 min-width/min-height 防缩至0，textarea 默认支持但常被 reset 覆盖。
resize: both 为什么加了没反应
直接写 resize: both 却看不到右下角拖拽手柄，几乎全是因漏掉了 overflow 设置。浏览器只对「能产生滚动框」的元素启用 resize，而判断依据就是 overflow 值是否为 auto、scroll 或 hidden（visible 不行）。display 也必须是块级上下文（如 block、inline-block、flex 等），inline 元素即使强行设 resize 也会被忽略。
常见错误组合：
-
resize: both; overflow: visible→ 手柄不出现 -
resize: vertical; overflow: auto→ 水平方向手柄消失，但垂直方向可用 -
resize: both; overflow: auto; width: 100%; height: auto→ 内容不够溢出，滚动条不触发，手柄仍不显示
稳妥写法：overflow: auto + 明确内容撑开或设 min-height 强制触发滚动条件。
div 加 resize 后拉不动或缩太小
用户一拉就缩成一条线，或根本拖不动，本质是缺乏尺寸约束。resize 改的是 element.style.width 和 element.style.height，但如果没有 min-width/min-height，浏览器允许缩到 0px——此时手柄可能被裁掉或失去响应区域，尤其在 Safari 中更敏感。
必须配的限制项：
-
min-width和min-height：防止缩无可缩（Safari 下不设min-width可能直接隐藏手柄） -
max-width和max-height：防用户拉爆布局，比如超出父容器或遮挡其他内容 - 避免同时设固定
width/height和resize：内联样式会覆盖 CSS 规则，但用户拖完后尺寸存在 style 上，后续 JS 读取要优先看getComputedStyle还是offsetWidth
示例安全配置：resize: both; overflow: auto; min-width: 200px; min-height: 120px; max-width: 80vw; max-height: 60vh;
textarea 默认可拉伸，但有时失效
textarea 是少数开箱即用支持 resize 的元素，默认值就是 resize: both。如果你发现它不能拖，大概率是被重置了：
- 检查是否写了
resize: none—— 常见于 Normalize.css、UI 框架（如 Ant Design、Bootstrap）的 reset 规则 - 想只允许垂直拉伸？用
resize: vertical，但注意：若内容短且不换行，水平方向无变化，视觉上像“没反应” - Safari 对
textarea的resize更严格，建议始终配min-width（哪怕min-width: 100px）防止缩到不可见
禁用拉伸的写法：textarea { resize: none; }；恢复默认：textarea { resize: both; }（需确保没更高优先级规则覆盖）。
resize 手柄无法自定义位置或样式
所有主流浏览器都把 resize 手柄硬编码在右下角（both）、右侧（horizontal）或底部（vertical），它不是真实 DOM 节点，而是 UA 渲染层叠加图形。
你无法做到的事：
- 用
::-webkit-resizer以外的伪类选中它（而该伪类仅限 WebKit，且只能改背景色/尺寸，不能移位） - 用
transform、margin或position调整手柄位置 - 监听手柄的
click或mousedown事件 - 让手柄出现在左上角、顶部或左侧边框
如果真需要全边框拖拽、分栏式拉伸（比如左右两栏中间一条可拖线），就得放弃 resize，改用 mousemove + getBoundingClientRect() 手动实现尺寸更新逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
