flex子项width: calc()失效，根本原因是flex-basis优先级高于width，默认auto值会覆盖calc计算结果；必须显式设flex-basis: calc(...)，并确保父容器宽度确定、box-sizing统一及视口单位稳定。
calc()在Flex子项里被flex-basis覆盖
Flex子项写width: calc(100% - 240px)却没生效，大概率是flex-basis在起作用——它优先级高于width，只要没显式设flex-basis: auto或flex-basis: content，浏览器就用flex-basis值（默认为auto，即取width声明值）做主轴尺寸计算，而width被忽略。
- 检查Computed面板里
flex-basis是否显示为auto，且width被划掉 - 想让
calc()真正控制尺寸，必须写flex-basis: calc(100% - 240px)，而不是只写width - 若同时设了
flex: 1，它会重置flex-basis为0%，此时width彻底无效
父容器没设明确宽度，导致100%无基准
Flex容器本身宽度不确定时，子项的calc(100% - Xpx)里100%就没参照物。常见于display: flex但父元素没设width、max-width，或父是position: absolute却没给left/right约束。
- Flex容器若靠内容撑开，其“内容区宽度”不可预测，
100%可能算出0或意外值 - 验证方法：临时给父容器加
outline: 1px solid red，看它是否真占满预期区域 - 稳妥做法：给Flex容器加
width: 100%或max-width: 100vw，确保100%有明确来源
box-sizing没统一，calc结果被padding/border吃掉
即使calc()算出正确像素值，若子项用默认box-sizing: content-box，那padding和border会额外加在width之外，实际占位远超预期。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 典型现象：三列
calc(33.3333% - 2px)布局仍换行，因为每列多出padding: 8px没计入 - 必须全局设
* { box-sizing: border-box; }，且补上*::before, *::after（伪元素不继承） - 若用第三方UI库（如Ant Design），检查它是否重置了
box-sizing，并在对应scope内覆盖
移动端软键盘弹出后视口突变，calc值未重算
iOS/Android软键盘弹出时，vh单位会剧烈变化（如100vh从768px缩到400px），但calc(100vh - 60px)不会自动重触发，导致高度错位或留白。
-
vh在键盘弹出后不更新是浏览器行为，不是bug - 避免直接用
100vh做关键布局，改用100%或min-height: 100dvh（dvh是动态视口高度，2026年已广泛支持） - 监听
resize事件手动重设——但注意iOS Safari中键盘收起时不总触发该事件，需配合focusin/focusout
Flex里calc()失效往往不是函数本身的问题，而是它被更高优先级的布局规则压制，或计算所依赖的上下文（宽度基准、盒模型、视口状态）本身就不稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
