CSS 的 flex-basis 不支持直接使用 CSS 变量，需改用 width + flex: 0 0 auto；变量须带单位、设 fallback，Safari 需强制重排，作用域缺失会导致 undefined。
用 --sidebar-width 变量控制 flex 值为什么不管用
因为 flex 属性（如 flex: 0 0 var(--sidebar-width)）不支持直接在 flex-basis 位置使用 CSS 变量——浏览器会忽略该值，退回到默认的 auto。这不是写法错，是 CSS 规范限制：flex-basis 接受长度、百分比或 content，但变量必须先被解析为合法值，而这里没发生。
实操建议：
- 改用
width或min-width+flex: 1组合：侧边栏设width: var(--sidebar-width); flex: 0 0 auto;，主内容区设flex: 1; - 确保
--sidebar-width定义带单位，比如:root { --sidebar-width: 240px; }，写成240或240rem（无单位或单位错）都会失效 - 如果需要响应式缩放（比如从 240px → 80px 折叠），别只靠变量，要配合
transition: width 0.3s ease;，否则变化突兀
折叠/展开时 flex 布局错位或内容溢出
常见现象：点击按钮后侧边栏变窄，但文字没隐藏、图标重叠、主内容区没及时撑满——本质是 flex 项未脱离文档流或未触发重排。
实操建议：
- 折叠状态优先用
width: 64px;+overflow: hidden;+text-overflow: ellipsis;，而不是仅靠flex-basis缩小 - 避免对侧边栏同时设
flex: 1和width，二者冲突；固定宽场景下，flex: 0 0 auto更安全 - 若用 JS 切换 class 控制状态，确保 class 中明确覆盖了
width和overflow，例如.sidebar.collapsed { width: 64px; overflow: hidden; }
calc() 和 CSS 变量一起用时计算失败
比如 width: calc(var(--sidebar-width) - 20px); 报无效值，是因为 var(--sidebar-width) 如果未定义或为空，整个 calc() 就失效，浏览器丢弃该声明。
实操建议：
- 始终为变量提供 fallback：
width: calc(var(--sidebar-width, 240px) - 20px); - 不要嵌套变量运算：
var(--sidebar-width, calc(100vw / 4))不合法，CSS 不支持在var()第二参数里用calc() - 调试时在 DevTools 里检查 computed 样式，看
width是否显示为具体像素值；如果是initial或空白，说明变量没生效或 fallback 也非法
在 Safari 上动态修改 --sidebar-width 没反应
Safari（尤其旧版）对 CSS 变量在 flex 相关属性中的更新响应滞后，有时需强制重排，比如改完变量立刻读取某 offset 属性。
实操建议：
- JS 修改变量后加一行触发重排：
getComputedStyle(document.documentElement).transform;（空读即可） - 避免高频修改：比如拖拽调整宽度时，用
requestAnimationFrame节流，不然 Safari 容易卡住或跳变 - 如果用
resizeObserver监听容器变化，注意它不监听 CSS 变量变更，得配合自定义事件或 MutationObserver（监听 style 标签）
最麻烦的其实是变量作用域和继承链——父元素没传入 --sidebar-width，子元素用 var(--sidebar-width) 就是 undefined，这种隐性失效最难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
