resize: horizontal 生效需同时满足 display 非 inline（如 block、inline-block、flex）且 overflow 非 visible（须设为 auto、scroll 或 hidden）；否则拖拽手柄不显示。
直接给元素设 resize: horizontal 是没用的，必须配合 overflow 和显示类型才能生效。
为什么 resize: horizontal 不显示拖拽手柄
浏览器只在满足两个硬性条件时才渲染水平调整手柄：元素必须能产生滚动容器（即 display 不能是 inline），且 overflow 不能是 visible。常见错误是只写 resize: horizontal 却漏掉 overflow 设置，结果手柄完全不出现。
-
display至少要是block、inline-block或flex——span默认是inline，加了resize: horizontal也会被忽略 -
overflow必须显式设为auto、scroll或hidden；visible（默认值）直接禁用 resize 功能 - 如果内容没溢出，
overflow: auto实际不显示滚动条，但手柄仍会出现；overflow: hidden则完全不显示滚动条，仅靠拖拽改变尺寸
resize: horizontal 的典型可用场景
适合需要用户自由调节宽度、但高度固定或由内容决定的容器，比如侧边栏、搜索输入区、代码行号列等。注意它对 textarea 同样有效，但需防 UI 框架重置。
- 给
textarea用时，检查是否被全局样式设了resize: none—— 这是很多 CSS 重置库（如 Normalize.css）或组件库（如 Ant Design）的默认行为 - 若
textarea内容单行不换行，水平拉伸可能无视觉反馈（宽度变了但内容不重排），建议加white-space: pre-wrap或限制min-width - 在 Flex 容器中使用时，
resize: horizontal手柄始终锚定在右边缘，不会随justify-content移动；想让它贴左？得手动 JS 实现
最小可行 CSS 组合示例
以下这段 CSS 能让一个 div 稳定支持水平拖拽：
立即学习“前端免费学习笔记（深入）”；
div.resizable-h {
display: inline-block; /* 或 block */
overflow: auto; /* 关键：触发 resize 手柄 */
resize: horizontal;
min-width: 100px; /* 防止拖到看不见 */
width: 200px;
height: 80px; /* 高度固定，避免 vertical 干扰 */
border: 1px solid #ccc;
}注意：height 建议设具体值或 min-height，否则某些浏览器（如 Safari）可能因高度塌缩导致手柄错位或消失。
容易被忽略的兼容性细节
resize: horizontal 在所有现代浏览器中都支持，但行为细节有差异：
- Firefox 和 Chrome 对
overflow: auto+resize: horizontal的响应最稳定；Safari 要求元素有明确border或padding才显示手柄 - 手柄永远出现在右边缘，无法用 CSS 移动位置，也不能监听点击事件——它不是 DOM 节点，只是 UA 渲染层图形
- 如果父容器设了
max-width或flex-basis，可能截断拖拽范围，实际宽度不会超过这些限制
真正需要“整条右边框都能拉”或“拖拽时实时计算布局”的，就得放弃 resize，改用 mousemove + getBoundingClientRect() 手动实现——原生 resize 就是个右下角小方块，别指望它做更多。
