[csswg-drafts] [css-flexbox] `align-content: stretch` for abspos children of flex containers should align with browser implementations. (#7596)

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

== [css-flexbox] `align-content: stretch` for abspos children of flex containers should align with browser implementations. ==
https://drafts.csswg.org/css-flexbox/#align-content-property

#### Summary
The behavior of Blink, Gecko, and WebKit with respect to `align-content: stretch` when computing the static position of absolutely-positioned children of flex containers the same whether the flex container has negative available space or not. This is in contrast to the spec text which specifies fallback behavior to `flex-start` when there is negative remaining space in the container. I am proposing that we amend the spec to align with the current behavior of browsers for `stretch` since it is the `normal` value for `align-content` and any change is risky for web compatibility.


#### Details
The static position of absolutely-positioned children of flex containers is determined as if they were the sole flex item in the container. In the case of a multi-line flex container, `align-content` is used to align flex lines within the container. When the container has available space, `align-content: stretch` will cause flex lines to fill the container. When the available space in the flex container is negative (the simplest, hand-wavy example is a child that is larger than the flex container) `align-content: stretch` is specified to fall back to be the same as `flex-start`. However, the behavior of all major browser engines is that the flex line fills the flex container whether available space is positive or negative. This is reflected in Web Platform Tests such as https://wpt.fyi/results/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005.html


The spec for `align-content: stretch` states
> Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to [flex-start](https://drafts.csswg.org/css-flexbox-1/#valdef-align-content-flex-start). Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

All browsers currently ignore the second sentence. This is somewhat of an accident in WebKit as we actually ignore `align-content` entirely, which is what I was working to resolve when I came across this disagreement between the spec and browser behavior.

The problem, as I see it, is that all browsers do not respect the fallback behavior for `align-content: stretch` when statically positioning abspos children and `stretch` is the default behavior. A change to match the spec in browser engines is risky for web compatibility as authors who leave `align-content` unspecified would have their content positioned differently than it is currently in all major browsers. @dholbert provided [a great example](https://github.com/web-platform-tests/wpt/issues/35420#issuecomment-1211406898) illustrating surprising behavior when following the current spec.

I propose the spec is amended to remove the fallback behavior to `flex-start` for absolutely positioned children and to specify behavior as is currently implemented.


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


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

Received on Thursday, 11 August 2022 18:07:36 UTC