css - 带变量和乘法的CSS Calc

我正在使用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（）中，但错误仍然存​​在。

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

最佳答案

如果您切换乘法的顺序，则似乎可行：

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

您对<number>自变量的权利，但忽略了该数字必须在乘法的右边。

关于css - 带变量和乘法的CSS Calc，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53244501/