Created attachment 467280 [details] A screenshot of the bug. Adding `contain: inline-size` collapses auto sized grid rows. # How to reproduce: Add `contain: inline-size` to a grid element with grid-template-rows: auto; A test-case is available here: https://johannesodland.github.io/browserbugs/2023/safari-contain-inline-size-grid-issue.html ```html <section> <div> Lorem ipsum </div> </section> ``` ```css section { box-sizing: border-box; display: grid; min-height: 100svh; grid-template-rows: auto; padding: 30px; contain: inline-size; } div { align-self: end; } ``` # Expected result: Grid row height is unaffected. The text is placed in the bottom of the screen. #Actual result Grid row height collapses The text is placed in the top of the screen.
<rdar://problem/113915953>
Pull request: https://github.com/WebKit/WebKit/pull/21701
I believe this issue that is occurring here is that we are skipping the step in the grid track sizing algorithm where we are supposed to distribute extra space to the tracks. AFAICT there is no reason to skip this part since this part of the spec has nothing to do with the content of the grid itself so it should still be done. By skipping this step the row is effectively sized to the height of the text and so has no room to perform any alignment like the one specified
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/43651
Committed 272085@main (cf2a9868136a): <https://commits.webkit.org/272085@main> Reviewed commits have been landed. Closing PR #21701 and removing active labels.