[css-box-4] For a multi-line flexbox when is trimming performed? #11398
Description
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.