[csswg-drafts] [css-values] [css-grid] Confusing behaviour of calculated `<flex>` (#13007)

AtkinsSJ has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values] [css-grid] Confusing behaviour of calculated `<flex>` ==
The way that `<flex>` interacts with `calc()` and other math functions is confusing me and seems inconsistent.

As a simple example: In Firefox and Chromium, `grid-auto-columns: 2fr` is valid but `grid-auto-columns: calc(2fr)` is not. With any other numeric type, those would be equivalent, and I can't see any specific mention in the property definition that calculated `<flex>` is not allowed here. Possibly this is just a feature that happens to be unimplemented in both engines?

[Values 4](<https://drafts.csswg.org/css-values-4/#math>) says that a math function can represent a `<flex>`.

[Grid-1](<https://drafts.csswg.org/css-grid-1/#typedef-flex>) (and Grid-2) say, somewhat confusingly:
> 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.

As far as I understand it, that's saying "you can't add a `<flex>` and a `<length>`", which is similar to saying that you can't add an `<angle>` and a `<length>`. That shouldn't make calculated flexes illegal.

As a side note, having two specs define `<flex>` is confusing, can we remove Grid's definition in favour of the one in Values?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13007 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 23 October 2025 12:14:35 UTC