[csswg-drafts] [css-align-3] the `safe flex-start` fallback alignment for `justify-content:space-between` is actually unsafe (#11937)

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

== [css-align-3] the `safe flex-start` fallback alignment for `justify-content:space-between` is actually unsafe ==
Per https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between , the fallback alignment for `justify-content: space-between` is `safe flex-start`.

Here, `safe` is defined as forcing `start` alignment when the aligned content causes overflow, per: https://drafts.csswg.org/css-align-3/#valdef-overflow-position-safe

In cases where the flex container's main axis is reversed (`flex-direction: row-reverse` or `flex-direction: column-reverse`) and the flex container itself establishes the scrollport by having `overflow:scroll`, the `safe` keyword here actually makes things *unsafe* -- it forces the overflow off of the `end` side, where content is unscrollable.

Testcases:
https://bugzilla.mozilla.org/attachment.cgi?id=9472153 (column-reverse)
https://bugzilla.mozilla.org/attachment.cgi?id=9472158 (row-reverse)

Current Firefox release 136.0.1 renders those^ testcases as orange squares without scrollbars due to following the spec on this point.

I'm planning to revert this behavior and remove `safe` as part of our fallback alignment here, to match other browsers; and I think we should update the spec as well.

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


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

Received on Friday, 14 March 2025 17:35:48 UTC