search

mdn / content

The content behind MDN Web Docs
https://developer.mozilla.org
Other
9.12k stars 22.45k forks source link

Browsers interpret flex shorthand to have 0% flex-basis #35515

Closed camsteffen closed 2 weeks ago

camsteffen commented 3 weeks ago

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

The flex shorthand like flex: 1 sets flex-basis to 0 according to spec. However browsers today are not in compliance with this spec, and set the basis to 0%. This has real implications especially in flexbox-driven layouts, where the parent height is not explicitly defined.

What did you expect to see?

MDN docs should provide a hint that the flex-basis might be 0% rather than 0, depending on the browser.

Do you have any supporting links, references, or citations?

https://github.com/w3c/csswg-drafts/issues/5742

Do you have anything more you want to share?

No response

MDN metadata

Page report details * Folder: `en-us/web/css/flex` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/flex * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/flex/index.md * Last commit: https://github.com/mdn/content/commit/2f27f95a09883099eeaa0edf0647be922c280ad6 * Document last modified: 2024-08-10T06:25:54.000Z
Josh-Cena commented 3 weeks ago

We have never mentioned 0% and 0 being different for flex-basis, so this needs updates to both flex and flex-basis to explain the situation.

OnkarRuikar commented 3 weeks ago

This is a browser bug. The browsers didn't change after the specs changed it back to 0 from 0%.

Percent values don't behave the same with flex-basis. Could you provide a minimal reproducible where 0 and 0% produce different outputs?

camsteffen commented 3 weeks ago

Example

(also posted in https://github.com/w3c/csswg-drafts/issues/5742)

camsteffen commented 3 weeks ago

This snippet of the CSS spec for flex-basis describes the problem fairly well:

For all values other than auto and content (defined above), flex-basis is resolved the same way as width in horizontal writing modes [CSS2], except that if a value would resolve to auto for width, it instead resolves to content for flex-basis. For example, percentage values of flex-basis are resolved against the flex item’s containing block (i.e. its flex container); and if that containing block’s size is indefinite, the used value for flex-basis is content.

The slippery part is getting a parent element with an indefinite width/height.

I'm just not sure what is the approach for integrating really fine details like this into MDN docs. I suppose it's a non-goal for MDN to represent any and all information found in the CSS spec.

Josh-Cena commented 3 weeks ago

I suppose it's a non-goal for MDN to represent any and all information found in the CSS spec.

It's hard to draw the line, but I'd say we should be a superset of the spec and anything explicitly called out in the spec should also be mentioned by us while any interaction not explicitly mentioned in the spec may also be interesting to developers. Here we definitely need to document the difference between 0 and 0%.

OnkarRuikar commented 3 weeks ago

So there are two thing to point out here:

  1. flex: 1 doesn't expand to flex: 1 1 0 in browsers
  2. Flex-basis 0 is not the same as 0%
OnkarRuikar commented 2 weeks ago

FYI, I raised a bug in Chromium and here is what a maintainer said:

Thanks for the bug report. If we do this change it'll likely break a large number of sites expecting the old behaviour unfortunately. (flexbox is used everywhere today - the bar for changing something as fundamental as this is super high now).

I've filed an issue on the CSSWG to reflect what the browsers are currently doing and change flex:1 back to setting a flex-basis of 0% instead of 0px. See: https://github.com/w3c/csswg-drafts/issues/10782

Also, see https://github.com/w3c/csswg-drafts/issues/5742#issuecomment-2311482423