CSS继承calc属性时重复计算而非继承计算值的问题咨询

嘿，我来帮你捋捋这个问题～首先从你的描述来看，这种情况更大概率是预期行为，而非浏览器Bug，但Chrome 64这个比较旧的版本（2018年发布的）确实可能存在一些calc()相关的老问题，不过先从最常见的原因说起：

核心可能原因：calc()的参考上下文不对 #

calc(100%)里的百分比是基于当前元素的父元素高度，而不是你期望的.c1的高度。举个例子：

• 如果.c1的父元素高度是400px，.c1直接继承或者被设置为这个高度；
• 但.c2的父元素高度其实是400px，同时你给.c2写了height: calc(100% - 50px)，那计算后自然是350px；
• 这时候你误以为.c2的calc会参考.c1的高度，但实际上CSS的百分比高度只认父元素的尺寸。

旧版本Chrome的calc()特性局限 #

Chrome 64属于比较早期的版本，当时浏览器对calc()在动态场景下的重绘/重新计算逻辑还有一些不完善的地方：

• 如果.c1的高度是通过JavaScript动态设置、或者通过其他依赖布局的属性（比如min-height、内容撑开）最终得到400px，.c2的calc()可能没有及时触发重新计算；
• 这类问题在后续的Chrome版本中已经被逐步修复，升级到较新版本的浏览器大概率会解决这类异常。

排查与修复建议 #

1. 用开发者工具确认计算逻辑：在Chrome的Elements面板里查看.c2的「Computed」样式，看看height的具体计算过程，确认calc()的输入值到底是基于哪个元素的高度；
2. 改用更可靠的高度同步方式：如果想让.c1和.c2高度完全一致，推荐用CSS变量或者布局方案：
   • CSS变量方案：

     :root {
       --target-height: 400px;
     }
     .c1, .c2 {
       height: var(--target-height);
     }
     

   • Flexbox/Grid布局：把两个元素放在同一个容器里，设置容器的布局属性让子元素自动占满高度；
3. 升级浏览器版本：Chrome 64已经是5年前的版本了，不仅有calc()的潜在问题，还有安全漏洞，建议升级到最新稳定版。

内容的提问来源于stack exchange，提问作者user3617487