resize属性仅对overflow不为visible的块级元素生效，必须配合overflow:auto/scroll/hidden及明确宽高约束才能启用拖拽功能。
resize 属性能用在 textarea 以外的元素上，但必须满足一个硬性前提：该元素的 overflow 值不能是 visible。 否则即使写了 resize: both，浏览器也完全忽略——这不是 bug，是规范行为。
为什么普通 div 加了 resize 没反应？
因为默认情况下 div 的 overflow 是 visible，而 CSS 规范明确规定：resize 只对 overflow 为 auto、scroll 或 hidden 的元素生效。Chrome、Safari、Firefox 都严格遵守这点。
-
overflow: visible→resize完全无效，控制柄不出现 -
overflow: auto或scroll→ 控制柄出现，可拖拽（哪怕内容没溢出） -
overflow: hidden→ 控制柄仍会出现，但滚动被裁剪，适合仅需缩放不需滚动的场景
resize 在非 textarea 元素上的典型写法
最常用组合是 overflow: auto + resize，同时配合尺寸限制防止失控：
div.resizable {
width: 300px;
height: 200px;
overflow: auto; /* 关键！缺它不行 */
resize: both;
min-width: 200px;
max-width: 600px;
min-height: 150px;
max-height: 400px;
border: 1px solid #ccc;
}
- 必须显式设
width和height，否则resize无法确定初始尺寸基准 -
min/max系列属性不是可选的“美化”，而是实际约束用户操作范围的必要手段 - 注意：Firefox 中
resize控制柄只出现在右下角；WebKit（Chrome/Safari）默认也是右下角，但可通过::-webkit-resizer伪元素微调样式
容易被忽略的兼容性与交互细节
不同浏览器对 resize 的支持和行为存在细微差异，直接影响可用性：
- IE/Edge（旧版）完全不支持
resize，现代 Edge（Chromium 内核）已支持 - 移动端 Safari（iOS）默认禁用
resize，即使加了样式也不显示控制柄 - 拖拽时如果容器内有
input或textarea获得焦点，可能触发输入框软键盘，干扰缩放操作 -
resize改变的是元素的width和height，不会触发布局重排（reflow），但会触发resize事件（仅限 window，**不是元素自身**）——想监听容器尺寸变化，得靠ResizeObserver
真正麻烦的不是怎么写，而是忘记 overflow 这个开关条件，或者没配 min/max 导致用户把容器拉成 10px × 10px 或撑满全屏。这两个点踩中任何一个，功能就等于没做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
