纯CSS可实现侧边栏左右拉伸，但仅WebKit浏览器（Chrome/Safari/Edge）支持通过::-webkit-scrollbar扩展拖拽区域为竖线；Firefox仅限右下角小区域且不支持该扩展，属浏览器限制而非写法错误。
纯 CSS 实现侧边栏左右拉伸是可行的，但仅限于 WebKit 内核（Chrome、Edge、Safari），Firefox 仅支持右下角小区域拖拽，且无法通过 ::-webkit-scrollbar 扩展 —— 这不是写法错，是浏览器限制。
为什么 resize: horizontal 只能在右下角拖？
因为 resize 属性生效的前提是元素 overflow 不为 visible，而默认可拖拽区域仅绑定在滚动条末端（即右下角）。这个区域大小由浏览器内建逻辑决定，无法用 width/height 直接放大。
-
resize: horizontal要求overflow-x: auto | scroll（hidden不行） - 即使设了
overflow: scroll，Firefox 仍只响应右下角约 16×16px 区域 - Chrome/Safari 下可通过
::-webkit-scrollbar把滚动条宽度拉满，从而“骗”出整条右侧拖拽带
如何把拖拽区扩展成一条竖线？
核心思路：用 opacity: 0 隐藏一个宽高的 resize 元素，再通过 ::-webkit-scrollbar 把它的滚动条撑满容器高度，最后用绝对定位的视觉线条（如 .resize-line）对齐显示。
-
.resize-bar必须设overflow: scroll（不能是auto，否则 Safari 在某些 zoom 下失效） -
::-webkit-scrollbar的width值建议设为固定像素（如12px），太大会导致鼠标悬停误触发 - 拖拽线（
.resize-line）要用pointer-events: none，否则会拦截.resize-bar的拖拽事件 - 必须给
.resize-bar设cursor: col-resize，不然用户看不到拖拽提示
.resize-bar {
width: 100%;
height: 100%;
resize: horizontal;
overflow: scroll;
opacity: 0;
cursor: col-resize;
}
.resize-bar::-webkit-scrollbar {
width: 12px;
}
.resize-line {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 2px;
background: #ccc;
pointer-events: none;
}
Firefox 下怎么处理？
Firefox 不支持 ::-webkit-scrollbar，也不响应 resize 的水平拉伸扩展。你有两个现实选择：
立即学习“前端免费学习笔记（深入）”；
- 降级为点击按钮切换预设宽度（如
240px/320px），用transition: width实现平滑变化 - 检测
@supports (-moz-appearance: none)，对 Firefox 隐藏拖拽线，只保留基础resize右下角区域（需加文字提示） - 不推荐 JS 模拟拖拽——它会破坏原生滚动性能，且难以精确同步
scrollLeft和布局重绘
真正跨浏览器稳定的拉伸体验，目前仍需 JavaScript 配合 mousemove + getBoundingClientRect() 计算，CSS 方案本质是 WebKit 专属优化。
容易被忽略的布局陷阱
用 resize 控制侧边栏时，最常踩的坑不是样式，而是父容器约束和子内容溢出：
- 侧边栏内部若含
white-space: nowrap或长 URL，会强行撑宽，突破min-width限制 —— 必须加overflow-wrap: break-word - Flex 布局中，
.sidebar不能依赖flex: 0 1 auto自动收缩，要显式设min-width和max-width - 如果侧边栏用了
position: absolute，resize-bar必须同级或嵌套在它内部，否则right: 0定位会失效 -
resize元素不能是display: inline或inline-block，必须是块级（block或flex等）
Webkit 下能跑通，不代表所有浏览器都接受同一套 DOM 结构 —— 拖拽区域是否可见，最终取决于 overflow + resize + scrollbar 三者的组合兼容性，而不是单个属性写对了就行。
