带变量和乘法的CSS Calc

Question

我正在使用Nu Html Checker验证CSS：

https://validator.w3.org/nu/

考虑以下CSS：

:root {
  --target-size: 48px;
}

.test1 {
  flex: 0 0 calc(var(--target-size) + 1px);
}

.test2 {
  min-height: calc(var(--target-size) - 0.5rem);
}

.test3 {
  flex: 0 0 calc(320px - 3 * var(--target-size));
}

验证者未报告.test1和.test2的错误。

但是，对于.test3，验证器报告此错误：

错误：flex：类型不兼容。

我知道CSS规则规定，要进行乘法运算，至少一个参数必须为<number>。我不认为这违反了。我尝试将乘法嵌套在另一个calc（）中，但错误仍然存​​在。

您知道该规则有什么问题以及如何更正吗？

Answer 1

如果您切换乘法的顺序，就好像可行：

flex: 0 0 calc(320px - var(--target-size) * 3);

您对<number>参数的看法正确，但没有想到数字必须在乘法的右边。