Re: [csswg-drafts] [css-sizing][css-flexbox] It's false that `stretch` size behaves as `stretch` alignment (#11784)

So while experimenting with implementing this we've come to the conclusion that its **not** true that `align-self: stretch` and `width: stretch` are _always equal_.

Specifically the difference comes from:

> Determine the hypothetical cross size of each item by performing layout as if it were an [in-flow](https://drafts.csswg.org/css-display-4/#in-flow) [block-level box](https://drafts.csswg.org/css-display-4/#block-level-box) with the used [main size](https://drafts.csswg.org/css-flexbox-1/#main-size) and the given available space, treating [auto](https://drafts.csswg.org/css-sizing-3/#valdef-width-auto) as fit-content.

https://drafts.csswg.org/css-flexbox-1/#algo-cross-item

For example:
```
<!DOCTYPE html>
<div style="font: 16px monospace; width: 100px; height: 100px; border: solid 4px; display: flex; gap: 10px; flex-wrap: wrap; flex-direction: column;">
  <div style="background: lime;">a b c </div>
  <div style="background: lime;">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
</div>
```

https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=13715

When determining the line-cross-size of a wrapping flexbox (typically of a column flexbox) the given available-size is always the container available size.

In this stage `width: auto` becomes `width: fit-content`. The line-cross-size is calculated based on this fact.

*Then* when determining the final used cross size (the final layout of the flex-item) `width: auto` becomes `width: stretch`.
This comes from:
> Determine the used cross size of each flex item. If a flex item has [align-self: stretch](https://drafts.csswg.org/css-flexbox-1/#propdef-align-self), its computed cross size property is [auto](https://drafts.csswg.org/css-sizing-3/#valdef-width-auto), and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line, clamped according to the item’s used min and max [cross sizes](https://drafts.csswg.org/css-flexbox-1/#cross-size). Otherwise, the used cross size is the item’s [hypothetical cross size](https://drafts.csswg.org/css-flexbox-1/#hypothetical-cross-size).

https://drafts.csswg.org/css-flexbox-1/#algo-stretch

`width: stretch` doesn't have the ability to change, and hence can result in a different layout in these circumstances.

IMO I think this behaviour difference is fine/expected. I don't think we want to magically coerce `stretch` to `fit-content` in the cross-size determination step.

(Also note that passing an indefinite available size doesn't work as that'll make the width `max-content` instead of `fit-content` which is a sutble behaviour difference).

I think that then the part of the sizing spec:
> Produces the same size that would be obtained by the [self-alignment property](https://drafts.csswg.org/css-align-3/#self-alignment-properties) in that axis being set to [stretch](https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch) and all [sizing properties](https://drafts.csswg.org/css-sizing-3/#sizing-property) and [aspect-ratio](https://drafts.csswg.org/css-sizing-4/#propdef-aspect-ratio) being set to their initial values.

https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing

... is **mostly** true, but incorrect when it comes to flexbox for the above reason. (There are larger implications for any behaviour change away from this when we have things like `min-width: stretch; width: fit-content` for example).

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


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

Received on Friday, 25 April 2025 17:54:19 UTC