css inherit from calc property 似乎是重复计算而不是继承计算值

Question

我不得不去上那样的课

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

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

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

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

事实证明 div.c2 的高度为 350px。 (使用 google chrome 版本 64.0.3282.140(官方构建)(64 位))

看起来很像再次应用了计算。

我找不到任何关于它的指针。

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

Answer 1

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

.c2 {
  height: 100%
}

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