calc()表达式未被解析是因语法错误导致浏览器静默丢弃，如+/-缺空格、0缺单位、CSS变量无单位、flex-basis覆盖width、vw/rem精度问题及父容器高度缺失等。
calc() 表达式根本没被解析，不是算错而是被跳过
绝大多数“结果不一致”，其实是 Firefox/Safari 直接静默丢弃整条声明，Chrome 可能宽容补全但不可靠。根源是语法未达标，浏览器连解析这步都没走完。
-
+和-两侧缺空格：如calc(100%-20px)→ 被当做一个非法单位名，整条规则失效；必须写成calc(100% - 20px) -
0没带单位：如calc(0 + 10px)→ 类型不明，Firefox/Safari 罢工；得写calc(0px + 10px)或calc(0% + 10px) - CSS 变量值本身无单位：如
--gap: 20，再用calc(100% - var(--gap))→ 多数引擎拒绝计算；必须定义为--gap: 20px
Flex 子项里 width: calc() 被 flex-basis 覆盖
写了 width: calc(100% - 240px) 却没反应？大概率是 flex-basis 在起作用——它优先级高于 width，默认值 auto 就会取 width 声明值做主轴尺寸，而你写的 calc() 实际被忽略。
- 检查 DevTools 的 Computed 面板：
flex-basis是否显示为auto，且width被划掉 - 想让
calc()生效，必须显式写flex-basis: calc(100% - 240px) - 若同时用了
flex: 1，它会重置flex-basis为0%，此时width彻底无效
vw 和 rem 混合计算在 Safari 里精度丢失
calc(100vw - 2rem) 在 Safari 15.4 之前常被截断，比如 2rem 直接被舍掉，结果变成 100vw。这不是语法错，是浮点精度实现差异。
- 优先用
px替代rem做减法，例如calc(100vw - 32px) - 若必须用
rem，确保:root的font-size是固定值（不用 JS 动态改） - 加
min-width: 0强制 Safari 重新评估表达式（小技巧，但有效）
父容器约束缺失导致 100% 基准为 0
calc(100% - 60px) 看似合理，但如果父元素 height 是 auto 或根本没设，那这个 100% 就没参照，结果是 0 - 60px = -60px，浏览器直接忽略该声明。
立即学习“前端免费学习笔记（深入）”；
- 常见于 Vue/React 组件中：
.content设了height: calc(100vh - 80px)，但它的父级.layout没设height: 100%，导致高度塌陷 - 验证方式：打开 DevTools，看该元素的
computed height是否为具体像素值；如果不是，就逆向查html → body →直接父容器 - 更健壮写法：用视口单位避开百分比依赖，如
height: calc(100dvh - 80px)（dvh是动态视口高度，2026 年已广泛支持）
真正容易被忽略的是三重叠加问题：空格没加 + 0 没带单位 + 预处理器变量又漏插值，任意一个出错都会让整条 calc() 宣告失效。
