浏览器原生resize无法控制侧边栏拖拽宽度，因其仅作用于单个元素且不联动布局；需结合css变量、grid-template-columns与calc()，并用js处理边界逻辑。
为什么直接用 resize 无法控制侧边栏拖拽宽度
浏览器原生的 resize 只作用于单个元素（如 textarea），且只能在右下角触发——它不感知布局关系，更不能“拖动分隔线”来联动改变两列宽度。强行给侧边栏加 resize: horizontal，只会让它自己缩放，主内容区不会响应式重排，反而可能破坏 Grid 或 Flex 布局流。
--sidebar-width 必须配合 grid-template-columns 才生效
纯 CSS 拖拽调整宽度的本质，是让拖拽行为能修改一个 CSS 自定义属性，再靠该变量驱动布局计算。关键链路是：resize 触发 → 修改 --sidebar-width → grid-template-columns 读取变量 → 重新分配空间。
但注意：grid-template-columns 不支持直接使用自定义属性做长度计算（比如 var(--sidebar-width) 1fr 会失效），必须配合 calc() 或降级为 minmax()：
- ✅ 正确写法：
grid-template-columns: calc(var(--sidebar-width, 240px)) 1fr - ❌ 错误写法：
grid-template-columns: var(--sidebar-width, 240px) 1fr（浏览器忽略整个声明） - ⚠️ 兼容性：Firefox 和 Safari 支持
calc(var(--x))，但旧版 Chrome 需要 fallback 到@supports检测
用 resize + overflow 模拟拖拽条时，必须隐藏滚动条并扩大可拖区域
默认 resize 只在右下角显示一个小方块，根本没法当侧边栏分隔线用。真正可行的做法是：把一个透明、高宽撑满的 resize 元素叠在侧边栏右侧边缘，再通过伪元素放大它的拖拽热区。
核心要点：
- 拖拽容器必须设
overflow: hidden或scroll，visible下resize无效 - 用
::-webkit-scrollbar把滚动条宽度拉到 200px，等于把 resize 热区横向撑开（仅 WebKit） - Firefox 不支持 scrollbar 宽度放大，需用
position: absolute+cursor: ew-resize手动覆盖一层可拖层 - 拖拽元素本身要
opacity: 0、pointer-events: none，只留热区，不干扰内容
拖拽松手后宽度“卡住”或跳变，大概率是没处理好 min-width 和 1fr 的冲突
当侧边栏宽度被拖小到一定程度，主内容区若含长单词、图片或未设 min-width: 0，就会撑破网格，导致 1fr 失效、布局错位——看起来像拖拽“失灵”。
必须加的防御性样式：
-
.sidebar { min-width: 60px; max-width: 400px; }（防拖过界） -
.main-content { min-width: 0; overflow-wrap: break-word; }（防内容撑格） -
grid-template-columns中避免混用fr和固定值做比例运算，例如1fr 2fr 200px是合法的，但1fr 2fr 3fr 200px会让前三个fr只分“剩余空间”，不是整体比例
最麻烦的一环其实是拖拽结束后的边界判定——是否收起、是否吸附到预设宽度、是否保留当前尺寸，这些逻辑纯 CSS 无法完成，得靠 JS 监听 resize 事件后读取 getBoundingClientRect().width 再写回 style.setProperty。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
