[csswg-drafts] [css-box-4] For a multi-line flexbox when is trimming performed? (#11398)

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

== [css-box-4] For a multi-line flexbox when is trimming performed? ==
Flexbox does a bunch of calculations before it knows what line an item will end up on (e.g. computing the hypothetical size).

Margins can affect these calculations - for example:
```
<!DOCTYPE html>
<div style="display: flex; flex-wrap: wrap; flex-direction: column; margin-trim: inline; width: 10%; border: solid 2px; height: 300px;">
  <div style="width: -webkit-fill-available; width: stretch; aspect-ratio: 1; background: lime; margin-inline: 20px;">1</div>
  <div style="width: -webkit-fill-available; width: stretch; aspect-ratio: 1; background: lime; margin-inline: 20px;">2</div>
  <div style="width: -webkit-fill-available; width: stretch; aspect-ratio: 1; background: lime; margin-inline: 20px;">3</div>
  <div style="width: -webkit-fill-available; width: stretch; aspect-ratio: 1; background: lime; margin-inline: 20px;">4</div>
</div>
```

Safari currently has hysteresis[1] in its calculation (e.g. resize the browser window for the above example). So ends up in two different states.

For a multi-line flexbox the differing sizes looks bad to me in this example, IMO it'd be better not to consider trimming at this stage of computing the hypothetical, etc. And instead only consider the trim margins after line-breaking, and flexing has been performed.

[1] Using the value of a previous layout in the next layout.




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


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

Received on Thursday, 19 December 2024 19:18:44 UTC