Does css `calc()` function support `fr` unit?

Question

As the title of the question suggests, does CSS calc() function support fr unit as used in the following example?

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

My initial guess is it doesn't - neither in Firefox nor Chrome.

Answer 1

No, according to specs

7.2.3. Flexible Lengths: the 'fr' unit

A flexible length or <flex> is a dimension with the 'fr' unit, which represents a fraction of the leftover space in the grid container. Tracks sized with fr units are called flexible tracks as they flex in response to leftover space similar to how flex items fill space in a flex container.

Note: <flex> values are not <length>s (nor are they compatible with <length>s, like some <percentage> values), so they cannot be represented in or combined with other unit types in 'calc()' expressions.

^{emphasize mine}