Continuing from #1117 examples 3/4/7/8...
<div style="display: grid; width: 200px;"> <img style="width: 100%;" src="http://placehold.it/50x50"> </div>Here to resolve the size of the auto column, we check our children.
auto is somehow equivalent to minmax(auto, max-content).
The image has width: 100%; which cannot be resolved as the column has auto size, so for the minimum track size we consider 0px. And we use 50px, the content size of the image as maximum track size. And for the row, we use 50px too (the content size of the image).
Then the column size is affected by the default justify-content: stretch; which makes the auto column to grow up to 200px. The image is sized against that size of the column, so it ends up being 200x200. However the row is still 50px.
The row here being 50px is not very helpful. It should respond to the stretching of the track.
The responsible spec prose is in https://drafts.csswg.org/css-grid/#algo-overview where stretch is processed at the end of the grid sizing algorithm. It should instead be integrated as a final step of track sizing, after fr sizing, in order to be looped into later track-sizing passes.
You can’t perform that action at this time.
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