CSS Calc with Variables and Multiplication

Question

I'm validating my CSS using the Nu Html Checker:

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

Consider the following 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));
}

The validator reports no error with .test1 and .test2.

However, for .test3, the validator reports this error:

Error: flex: The types are incompatible.

I know that the CSS rules stipulates that for multiplication, at least one of the arguments must be a <number>. I don't see that violated. I've tried nesting the multiplication in another calc(), but the error persists.

Any idea what's wrong with that rule and how to correct it?

Answer 1

If you switch the order of multiplication it seems like it works:

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

You're right about the <number> argument but missed that the number has to be on the right side of the multiplication.