css继承自calc属性似乎重复计算而不是继承计算值

Question

我要上课那样

.c1{height:calc(100%-50px;}
.c2{height:inherit;}

然后是一些使用它们的DOM：

<div class="c1">
  <div class="c2">
    foo
  </div>
<div>

所以问题是如果div.c1最终以let表示400的高度，我希望div.c2具有相同的高度。

事实证明div.c2的高度为350px。 （使用谷歌浏览器版本64.0.3282.140（官方版本）（64位））

看起来像是再次应用了钙。

我找不到任何指针。

有什么想法吗？这是预期的行为吗？或者这是一个小故障？

Answer 1

如果您计划.c2占用所有父级空间，那么您应该申请

.c2 {
  height: 100%
}

否则，如您所说 - 将应用另一个计算。 Calc不是一些预处理值，而是一个公式，它不会将自身替换为实际值，而是在运行时计算它。因此，继承calc意味着它将在继承元素上应用相同的公式