resize: horizontal 在 absolute 侧边栏上失效，根本原因在于未满足三个硬性条件：overflow 不能是 visible、必须显式设置 width/left/right 或 top/bottom 约束、父容器需为 position: relative；Chrome/Safari 可通过加宽垂直滚动条（≥12px）扩展拖拽区域，Firefox 则需用 @supports 降级为预设宽度按钮。
resize: horizontal 在 absolute 侧边栏上不生效？检查这三个硬性条件
根本不是浏览器 bug，而是 resize 属性对布局有隐式要求：元素必须有明确的溢出边界才能触发拖拽。用 position: absolute 做侧边栏时，若漏掉以下任一条件，resize: horizontal 就会静默失效：
-
overflow不能是visible（哪怕只写overflow: hidden也行） - 必须显式设置至少一个尺寸约束：
width、left和right二选一，或top/bottom配合高度约束 - 父容器需为
position: relative（否则absolute元素脱离预期定位上下文，拖拽后位置漂移）
常见错误是只写 resize: horizontal + overflow: auto，但内容没撑满、没真实溢出，浏览器判定“无需滚动”，直接忽略 resize。
如何让整条右侧边缘都可拖，不只是右下角小点？
Chrome/Safari 中，resize 手柄默认藏在垂直滚动条与水平滚动条交点处——也就是右下角那个小方块。想把它“拉高”成一条竖线，唯一可靠方式是加宽垂直滚动条：
.sidebar {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 260px;
overflow: hidden;
resize: horizontal;
}
<p>.sidebar::-webkit-scrollbar {
width: 12px; /<em> 必须 ≥12px，设为 0 则拖拽区域消失 </em>/
height: 100%;
}</p><p>.sidebar::-webkit-scrollbar-thumb {
background: #ccc;
}注意：::-webkit-scrollbar 在 Firefox 完全无效；它只认右下角约 12×12px 区域，且仅当 overflow: auto + 内容真实溢出时才启用。
立即学习“前端免费学习笔记（深入）”；
Firefox 下怎么处理？别模拟，直接降级
Firefox 不支持非 <textarea> 元素的 resize: horizontal，这是引擎限制，不是 CSS 写错。强行用 JS 模拟拖拽坐标映射、缩放适配、防抖、持久化宽度，成本远高于降级方案：
- 用
@supports not (resize: horizontal)检测，隐藏拖拽视觉提示 - 提供预设宽度按钮（如
240px/320px/auto），通过 class 切换或 CSS 变量控制 - 避免监听
mousemove+style.width直改——这在 Firefox 下既卡顿又不可靠
Electron 或内部工具项目可无视此限制；面向公众的网站必须考虑 Firefox 用户体验断层。
为什么不要用 flex-basis 或 grid-template-columns 直接响应拖拽？
拖拽过程中频繁修改 flex-basis 或 grid-template-columns 会触发连续重排（reflow），导致卡顿、跳变，甚至松手后回弹。真实项目中应：
- 把宽度存为独立变量（如
sidebarWidth），拖动时只更新变量 - 用
requestAnimationFrame节流，单次写入style.width或 CSS 变量 - 分隔线（resizer）必须设
cursor: ew-resize和user-select: none，否则文字被误选、光标错乱 - 全局监听
mouseup和mouseleave，防止鼠标划出窗口后拖拽状态锁死
最易被忽略的是：resize 区域在缩放（Ctrl+）或移动端视口变化时不会自适应——它始终基于物理像素，所以 right: 20px 类写法在 iPhone 竖屏下大概率压住滚动条，得用 calc(2vw) 或 CSS 变量配合媒体查询。
