https://drafts.csswg.org/css-flexbox/#align-content-property
SummaryThe behavior of Blink, Gecko, and WebKit with respect to align-content: stretch when computing the static position of absolutely-positioned children of flex containers is 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.
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. 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. @dholbert provided a great example 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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3