resize: both 生效需同时满足块级元素和 overflow 非 visible；常见失效因 overflow: visible、display 非块级或 safari 缺宽度约束；推荐 overflow: auto + resize: both 并设 min-width/min-height。
直接加 resize: both 没用，必须同时满足两个硬性条件：元素是块级（或能产生滚动框的显示类型），且 overflow 不为 visible。
为什么 div 加了 resize: both 却没拖动手柄
浏览器会静默忽略不合规的写法。常见失效原因包括：
-
overflow仍为默认值visible—— 这是最常见的漏配项 - 元素是
inline或未显式设display: block/inline-block等可滚动显示类型 - 在 Safari 中，元素缺少明确宽度约束（如没设
width、min-width或max-width） - 父容器用了
display: flex或grid，但子元素没设align-self: flex-start等，导致尺寸不可计算
正确启用 resize: both 的最小配置组合
推荐使用 overflow: auto + resize: both，它最稳妥，内容溢出时自动出现滚动条，手柄稳定可见：
div.resizable {
width: 400px;
height: 200px;
min-width: 200px;
min-height: 100px;
overflow: auto;
resize: both;
border: 1px solid #ccc;
}
关键点：
-
min-width/min-height必须设，尤其在 Safari 下否则手柄不出现 -
overflow: auto比scroll更友好：不强制显示滚动条，只在需要时才出现 -
overflow: hidden也能生效，但用户看不到溢出内容，仅适合裁剪场景 - 不要用
overflow: visible—— 此时resize完全被忽略，无任何提示
textarea 为什么默认就能拖，但有时又不行
textarea 是少数开箱即用支持 resize 的元素，默认就是 resize: both。失效通常是因为：
- 被重置样式覆盖，比如全局写了
textarea { resize: none; } - 只设了
resize: vertical，但内容太短或不换行，水平方向无变化，误以为“没反应” - Safari 对空内容或极小尺寸的
textarea更敏感，建议始终加min-width: 100px和min-height: 60px - 动态插入的
textarea（如 JS 创建的弹窗表单），需确保插入 DOM 后立即应用样式，否则首帧可能闪出手柄
resize 手柄无法自定义，别白费劲改样式
右下角那个小方块是浏览器原生控件，不是真实 DOM 节点：
-
::-webkit-resizer是唯一能有限干预的伪元素，但仅限 WebKit 内核，且只能调颜色/背景，不能移位、缩放或监听点击 - 用
transform、margin、position都无效 - 想实现“整条右边框都能拉”或“等比缩放”，必须放弃
resize，改用mousemove+getBoundingClientRect()手动计算 -
resize不触发任何 DOM 事件，尺寸变更只反映在element.style.width和element.style.height上，要响应变化得靠ResizeObserver
真正容易被忽略的是：Safari 的尺寸约束要求和 ResizeObserver 的必要性——前者让样式看似生效却无手柄，后者让你在用户松手后才能拿到最终尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
