Re: [csswg-drafts] [css-flexbox-1] Inconsistent sizing of replaced elements in flex containers (#12012)

> Why width: 50% is ignored, even when the container appears to have a definite size?

The flex item containing text is sized as `max-content`, trying to fit all the text in a single line. But of course it's not possible for the single-line text plus the 50% wide image to fit in the container, so both items shrink.

If you don't want the image to shrink, you can add `flex-shrink: 0`.

> If the inline size of the container is not considered definite

It's definite. Automatic size behaving as a definite `stretch`, limited below 500px.

> Why does the image not stretch when `height:100%`?

`align-self: stretch` requires the cross size property to compute to `auto`.

> Why Grid layout appears to handle these same percentage-based dimensions more predictably than Flexbox?

That's an entirely different layout algorithm, so of course there are differences. Being more or less predictable is opinion-based.



-- 
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12012#issuecomment-2758632142 using your GitHub account


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

Received on Thursday, 27 March 2025 16:19:15 UTC