216144 2020-09-03 14:40:28 -0700 [css-grid] Wrong 'auto' track size for a grid item with a specified 'width:max-content' 2025-04-22 15:05:38 -0700 1 1 1 Unclassified WebKit CSS WebKit Nightly Build Unspecified Unspecified NEW https://bugs.chromium.org/p/chromium/issues/detail?id=818401 https://bugs.webkit.org/show_bug.cgi?id=289961 http://wpt.live/css/css-grid/grid-items/grid-intrinsic-maximums.html BrowserCompat, InRadar, WPTImpact P2 Normal --- 1 obrufau webkit-unassigned ahmad.saleem792 bramus gwhitworth jfernandez rego sgill26 webkit-bug-importer oldest_to_newest 1685441 0 407914 obrufau 2020-09-03 14:40:28 -0700 Created attachment 407914 testcase Originally filed by Mats Palmgren for Chromium (https://bugs.chromium.org/p/chromium/issues/detail?id=818401) **What steps will reproduce the problem?** (1) load the attached testcase **What is the expected result?** In the two tests labelled "max-content", the grid container's width and its computed 'grid-template-columns' value should be 40px, because that's the grid item's max-content size. **What happens instead?** The grid item overflows the grid container in the two tests labelled "max-content". The relevant spec section: https://drafts.csswg.org/css-grid/#algo-single-span-items "For auto minimums: If the track has an auto min track sizing function and the grid container is being sized under a min/max-content constraint, set the track’s base size to the maximum of its items’ min/max-content contributions, respectively. Otherwise, set its base size to the maximum of its items’ min-size contributions. The min-size contribution of an item is the outer size that would result from assuming the item’s min-width or min-height value (whichever matches the relevant axis) as its specified size if its specified size (width or height, whichever matches the relevant axis) is auto, or else the item’s min-content contribution." When sized under a min/max-content constraint, the base size is the item's min/max-content contributions, respectively. The item has an explicit 'width' that is 'max-content', thus it's min-content contribution is 40px and its max-content contribution is also 40px. Thus the column size is 40px which makes the container's width 40px in both cases, thus the intrinsic width of the container is 40px. Under "no constraint", the 2nd paragraph applies, and the 'min-size contribution' is "the item’s min-content contribution" (since its 'width' is not 'auto'). Again, the result is 40px. 1687540 1 webkit-bug-importer 2020-09-10 14:41:17 -0700 <rdar://problem/68665611> 1893408 2 gwhitworth 2022-08-23 19:52:36 -0700 This has bitten me as well as can be seen in this scenario: (1) Open https://codepen.io/gregwhitworth/pen/BarERQv Chromium and Firefox render as expected 2112488 3 miteshgulecha 2025-04-22 15:05:38 -0700 Pull request: https://github.com/WebKit/WebKit/pull/44385 407914 2020-09-03 14:40:28 -0700 2020-09-03 14:40:28 -0700 testcase Chrome-bug-max-content.html text/html 1772 obrufau PCFET0NUWVBFIGh0bWw+CjwhLS0KICAgICBBbnkgY29weXJpZ2h0IGlzIGRlZGljYXRlZCB0byB0 aGUgUHVibGljIERvbWFpbi4KICAgICBodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9wdWJsaWNk b21haW4vemVyby8xLjAvCi0tPgo8aHRtbD48aGVhZD4KICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+ CiAgPHRpdGxlPjwvdGl0bGU+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCi5ncmlkIHsKICBk aXNwbGF5OiBpbmxpbmUtZ3JpZDsKICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IG1pbm1heChhdXRv LCAxNXB4KTsKICBhbGlnbi1pdGVtczogc3RhcnQ7CiAganVzdGlmeS1pdGVtczogc3RhcnQ7CiAg Ym9yZGVyOiBkb3R0ZWQ7CiAgbWFyZ2luLWJvdHRvbTogNHB4Owp9CgoudDIgeyBncmlkLXRlbXBs YXRlLWNvbHVtbnM6IG1pbm1heChhdXRvLCAzMHB4KTsgfQoKc3BhbiB7CiAgYmFja2dyb3VuZDog Z3JleTsKfQoKLm1pbi1jb250ZW50IHsKICB3aWR0aDogLW1vei1taW4tY29udGVudDsKICB3aWR0 aDogLXdlYmtpdC1taW4tY29udGVudDsKICB3aWR0aDogbWluLWNvbnRlbnQ7Cn0KLm1heC1jb250 ZW50IHsKICB3aWR0aDogLW1vei1tYXgtY29udGVudDsKICB3aWR0aDogLXdlYmtpdC1tYXgtY29u dGVudDsKICB3aWR0aDogbWF4LWNvbnRlbnQ7Cn0KLmZpdC1jb250ZW50IHsKICB3aWR0aDogLW1v ei1maXQtY29udGVudDsKICB3aWR0aDogLXdlYmtpdC1maXQtY29udGVudDsKICB3aWR0aDogZml0 LWNvbnRlbnQ7Cn0KLmZpbGwgewogIHdpZHRoOiAtbW96LWF2YWlsYWJsZTsKICB3aWR0aDogLXdl YmtpdC1maWxsLWF2YWlsYWJsZTsKICB3aWR0aDogZmlsbDsKfQoKeCB7IGRpc3BsYXk6aW5saW5l LWJsb2NrOyB3aWR0aDoyMHB4OyBoZWlnaHQ6MTBweDsgfQoKICA8L3N0eWxlPgo8L2hlYWQ+Cjxi b2R5PgoKPHByZT5ncmlkLXRlbXBsYXRlLWNvbHVtbnM6IG1pbm1heChhdXRvLCAxNXB4KTwvcHJl PgptaW4tY29udGVudDogPGRpdiBjbGFzcz0iZ3JpZCI+PHNwYW4gY2xhc3M9Im1pbi1jb250ZW50 Ij48eD48L3g+PHg+PC94Pjwvc3Bhbj48L2Rpdj48YnI+Cm1heC1jb250ZW50OiA8ZGl2IGNsYXNz PSJncmlkIj48c3BhbiBjbGFzcz0ibWF4LWNvbnRlbnQiPjx4PjwveD48eD48L3g+PC9zcGFuPjwv ZGl2Pjxicj4KZml0LWNvbnRlbnQ6IDxkaXYgY2xhc3M9ImdyaWQiPjxzcGFuIGNsYXNzPSJmaXQt Y29udGVudCI+PHg+PC94Pjx4PjwveD48L3NwYW4+PC9kaXY+PGJyPgpmaWxsOiA8ZGl2IGNsYXNz PSJncmlkIj48c3BhbiBjbGFzcz0iZmlsbCI+PHg+PC94Pjx4PjwveD48L3NwYW4+PC9kaXY+PGJy PgoKPGJyIGNsZWFyPSJhbGwiPgo8YnIgY2xlYXI9ImFsbCI+CjxwcmU+Z3JpZC10ZW1wbGF0ZS1j b2x1bW5zOiBtaW5tYXgoYXV0bywgMzBweCk8L3ByZT4KCm1pbi1jb250ZW50OiA8ZGl2IGNsYXNz PSJncmlkIHQyIj48c3BhbiBjbGFzcz0ibWluLWNvbnRlbnQiPjx4PjwveD48eD48L3g+PC9zcGFu PjwvZGl2Pjxicj4KbWF4LWNvbnRlbnQ6IDxkaXYgY2xhc3M9ImdyaWQgdDIiPjxzcGFuIGNsYXNz PSJtYXgtY29udGVudCI+PHg+PC94Pjx4PjwveD48L3NwYW4+PC9kaXY+PGJyPgpmaXQtY29udGVu dDogPGRpdiBjbGFzcz0iZ3JpZCB0MiI+PHNwYW4gY2xhc3M9ImZpdC1jb250ZW50Ij48eD48L3g+ PHg+PC94Pjwvc3Bhbj48L2Rpdj48YnI+CmZpbGw6IDxkaXYgY2xhc3M9ImdyaWQgdDIiPjxzcGFu IGNsYXNzPSJmaWxsIj48eD48L3g+PHg+PC94Pjwvc3Bhbj48L2Rpdj48YnI+Cgo8L2JvZHk+PC9o dG1sPgo=