<p>移动端侧边栏calc()失效主因是布局模式错配或单位基准缺失：flex下width被flex-basis覆盖，应改用flex:0 0 calc(100% - 240px)并设主内容区min-width:0；100vw比100%更稳但受iOS状态栏影响；响应式动画需同步flex-basis、overflow和transition。</p>
移动端侧边栏用 calc() 计算宽度，核心问题不是“怎么写公式”，而是“公式在什么上下文里才真生效”——90% 的失效都源于布局模式错配或单位基准缺失。
flex 布局下 width: calc() 为什么被忽略？
你写了 .sidebar { width: calc(100% - 240px); }，但侧边栏宽度始终是 240px 或撑满全屏。这不是 bug，是 flex 的行为规范：子项的主轴尺寸由 flex-basis 主导，width 属性在 flex 容器中会被覆盖。
- 正确做法：把
width换成flex-basis，但注意flex-basis不支持 CSS 变量（如flex-basis: var(--w)会静默失效） - 替代方案：用
flex: 0 0 calc(100% - 240px)—— 这里flex-basis接受 calc 表达式，且兼容性好（Chrome 29+/Safari 9+/Firefox 22+） - 必须同步给主内容区加
min-width: 0，否则长单词或<pre class="brush:php;toolbar:false;"></pre>会让 flex 项拒绝收缩，calc 结果形同虚设
calc(100vw - Xpx) 和 calc(100% - Xpx) 哪个更稳？
在移动端，calc(100vw - 20px) 比 calc(100% - 20px) 更可靠，但只在特定场景成立。
-
100vw总是等于当前视口宽度（含滚动条），不依赖父容器宽度定义，适合position: fixed或根级容器 -
100%是相对于包含块（containing block）的宽度，如果父容器是display: block且没设width，它的宽度由内容撑开，100%就可能为 0 或意外值 - 坑点：iPhone 竖屏时
100vw包含状态栏宽度（iOS Safari 会动态调整），若侧边栏需紧贴内容区右侧，用100vw可能导致轻微偏移；此时改用100%+ 显式父容器width: 100%更准
响应式收起/展开时 calc() 宽度跳变怎么办？
点击按钮后侧边栏从 240px → 0，但主内容区卡在原位不动，或动画卡顿、闪动——这常是 Safari iOS 15–16 的渲染竞态问题，不是代码写错。
立即学习“前端免费学习笔记（深入）”；
- 别只改
width，收起时应同时设flex-basis: 0+overflow: hidden+transition: flex-basis 0.3s ease - 避免在 transition 中混用
width和flex-basis，Safari 会取其中一值做动画起点，造成错帧 - JS 更新变量后（如
el.style.setProperty('--sidebar-w', '0')），不要立刻读offsetWidth，加一层requestAnimationFrame再读 - 调试时临时加
outline: 1px solid red到侧边栏，确认 computed width 是否随状态变化，而非只看 style 面板里的声明
calc() 里混用单位时最易踩的三个坑
移动端设备型号多、浏览器版本杂，calc() 对单位组合异常敏感，尤其在字体加载、缩放、安全区域等场景下。
-
calc(100% - 1em)：字体未加载完成时，1em取默认 16px，布局跳变；换成calc(100% - 16px)或用rem（基于 root font-size）更稳 -
calc(100vw - var(--sidebar-w))：若--sidebar-w是20ch，而当前字体非等宽（如中文混排），ch值浮动，仅适合微调，别用于主干布局 -
calc(var(--sidebar-w, 240px) - 20px)：fallback 必须带单位，var(--sidebar-w, 240)会整条声明失效；旧版 Safari 解析失败时，可兜底写成calc(var(--sidebar-w, 240px) * 1px)
真正难的不是写出一个能跑的 calc 表达式，而是让这个表达式在 iPhone 竖屏缩放、Android Chrome 多任务视图、Safari 安全区域裁剪、以及 JS 动态更新变量的多个并发条件下，始终返回预期值——这时候，calc() 只是工具，布局模式、作用域控制、和降级策略才是关键。
