Свойство flexbox flex не может принимать переменную css?

Question

Я пытаюсь использовать css varaible в свойстве shorthad flex или в flex-based. Основная причина в том, что эта переменная с ohters находится в верхней части моей таблицы стилей CSS, чтобы легко учесть возможные изменения, которые могут появиться в будущем, без необходимости искать, где это изменение должно быть сделано в таблице стилей.

Я пробовал:

flex: 1 1 var(--menuItemHeight) ;

или:

flex: 1 1 calc((100vh - 70px) / var(--numberOfMenuItems));

Где: --menuItemHeight: calc(( 100vh - 70px) / 5);

илигде: --numberOfMenuItems: 5;

Даже объявляя индивидуально свойства, такие как:

flex-grow: 1;

flex-shrink: 1;

flex-basis: var(--menuItemHeight);

Ни одна из этих работ.

Единственный способ, с помощью которого я могу выполнить эту работу, - это не включать переменные в свойство flex и не производить вычисления непосредственно с помощью свойства.

flex: 1 1 calc((100vh - 70px) / 5);

или

flex-basis: calc((100vh - 70px) / 5);

Я не смог найти никакой информации по этому вопросу. Это ограничение свойства flex?

Спасибо!

Answer 1

D'OH! Просто понял, что забыл поставить ":" как раз перед объявлением корня! Теперь это работает!

Также я хотел бы добавить, что после некоторого размышления, если вам не нужна высота для какого-либо элемента дизайна для некоторой цели дизайна, минимальная высота также подойдет. В данном случае использование calc не имеет значения, Flex делает это для вас, вот для чего он предназначен!