resize属性必须配合overflow生效，仅设resize: both无效；需显式设置overflow为auto、hidden或scroll，且Safari要求元素有明确尺寸约束。
resize 属性必须配合 overflow 才生效
直接写 resize: both 却没反应？大概率是漏了 overflow。这个属性不会在 overflow: visible（默认值）下工作，浏览器压根不渲染拖动手柄。你得显式设成 auto、hidden 或 scroll 之一。
-
overflow: auto最常用：内容溢出时才显示滚动条，手柄稳定可见 -
overflow: hidden适合裁剪场景，但要注意内容可能被截断 -
overflow: scroll强制显示滚动条，哪怕内容没溢出，手柄位置更固定 - 别用
overflow: visible—— 此时resize彻底失效，连警告都不会报
resize 值选 both 还是 horizontal/vertical
both 看似最自由，但实际交互中容易误操作：用户一拖就拉歪比例，尤其在表单或卡片类布局里。多数真实场景其实只需要单向控制。
- 文本域（
textarea）通常只设resize: vertical，避免横向撑破容器 - 代码编辑器面板或日志预览区适合
resize: horizontal，方便拉宽看长行 -
both仅推荐用于独立可浮动的调试面板、画布容器等明确需要二维调整的区域 - 注意：
block和inline值虽存在，但兼容性差（Safari 16.4+ 才开始支持），目前不建议线上使用
为什么 Chrome/Firefox 可用，但 Safari 有时不灵
Safari 对 resize 的触发有额外限制：它要求元素必须有明确的尺寸约束（比如 width、min-width 或 max-width），否则即使写了 resize: both + overflow: auto，手柄也不出现。
- 常见踩坑：给
div设了resize: both，但只写了height: 200px，没设宽度 —— Safari 下手柄消失 - 解决办法：加一行
min-width: 200px或width: fit-content，让尺寸可计算 - Firefox 最宽松，Chrome 次之，Safari 最严格 —— 测试务必在三端都点一下右下角
- IE 完全不支持，Edge 基于 Chromium 后已支持，无需额外处理
禁用 resize 时别只靠 none
resize: none 能关掉手柄，但它不阻止用户通过 DevTools 手动改样式。真正要防误调，得结合其他手段。
立即学习“前端免费学习笔记（深入）”；
- 对表单控件如
textarea，除了resize: none，最好再加max-width: 100%防父容器溢出 - 若元素是动态插入的（比如 JS 创建的弹窗），记得在插入后立即补上
style.resize = 'none'，否则初始帧可能闪出手柄 - 某些设计系统会用
pointer-events: none覆盖右下角区域，但这会同时禁掉滚动条点击，慎用
resize 的手柄永远出现在右下角，且无法用 CSS 重定位或换图标 —— 这是浏览器原生控件，样式完全不可控。如果项目需要自定义拖拽点或方向指示器，就得放弃 resize，改用 ResizeObserver + 自己监听鼠标事件实现。
