CSS Calc с переменными и умножением

Question

Я проверяю свой CSS с помощью Nu Html Checker:

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>, но пропустили, что число должно быть справа от умножения.