Функция css `calc ()` поддерживает блок `fr`?

Question

Как видно из заголовка вопроса, поддерживает ли функция CSS calc() модуль fr, используемый в следующем примере?

.sample-grid {
    --main-fr: 60fr;
    grid-template-columns: var(--main-fr) 1rem calc(100 - var(--main-fr));
}

Мое первоначальное предположение, что это не так - ни в Firefoxни Chrome.

Answer 1

Нет, согласно спецификации

7.2.3.Гибкие длины: единица измерения 'fr'

Гибкая длина или - это размерность с единицей измерения 'fr' , которая представляет часть оставшегося пространства в сеточном контейнере.Дорожки с размерами fr называются гибкими, так как они изгибаются в ответ на оставшееся пространство, подобно тому, как гибкие элементы заполняют пространство в гибком контейнере.

Примечание: значения не являются s (и не совместимы с s, как некоторые значения), , поэтому они не могут быть представлены или объединены с другими типами единиц в выражениях 'calc ()' .

^{Подчеркни мое}