|[css-grid] Tracks sized with fit-content are stretching|
|Reported by m...@rachelandrew.co.uk, Aug 16||Back to list|
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 Steps to reproduce the problem: 1. Create a grid with column tracks sized using fit-content and an argument of 200px. 2. Do not add justify-content, so the default of stretch applies. What is the expected behavior? Tracks should be clamped to 200px. What went wrong? Tracks stretch, unless we also add justify-content: start or justify-content: end. Did this work before? N/A Does this work in other browsers? No Firefox displays the tracks as I would expect. WebKit matches Chrome behavior. Chrome version: 60.0.3112.90 Channel: stable OS Version: OS X 10.12.6 Flash Version: Shockwave Flash 26.0 r0 See: https://codepen.io/rachelandrew/pen/WEXBMR?editors=1100
So I thought this was a clear issue and I've already a patch for it: https://chromium-review.googlesource.com/c/618707 But now reading the specs I'm not 100% sure, so let's clarify this before landing the patch. The relevant sections of the spec are: * 11.8. Stretch auto Tracks (https://drafts.csswg.org/css-grid/#algo-stretch) This step sizes expands tracks that have an auto max track sizing function by dividing any remaining positive, definite free space equally amongst them. * fit-content( <length-percentage> ) (https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-fit-content) Represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum. The max track sizing function for the fit-content() tracks is "max(auto, argument)". In the case "auto" is the maximum should it be considered an "auto max track sizing function" or not? I'm attaching an screenshot with different cases of a column with "fit-content(100px)". 1) The item is small so the track doesn't reach the 100px limit. 2) The item is large, but the min-content of that item is small. In that case the track is limited by the 100px. 3) The min-content of the item is large, so the track grows over the 100px limit. Notice that in the case 2) the height of the row is weird/wrong in Chrome (as it's not updated after stretching the track). Would be ok to avoid stretching in all cases? Should we stretch any of them? IMHO, I believe that we should avoid stretching for fit-content(). That would be simpler to implement too. But I'd love to hear the feedback from Rachel and Tab on the topic. Thanks!
There's now an issue on CSS WG to clarify this behavior: https://github.com/w3c/csswg-drafts/issues/1732
|► Sign in to add a comment|