Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 2 users
Status: Started
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment
[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
 
14-fit-content-is-stretching.zip
1.8 KB Download
Cc: svil...@igalia.com jfernan...@igalia.com r...@igalia.com
Components: -Blink>Layout Blink>Layout>Grid
Labels: -OS-Mac OS-All
Status: Available
Cc: m...@rachelandrew.co.uk tabatkins@chromium.org
Owner: r...@igalia.com
Status: Started
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!

Screenshot from 2017-08-17 11-43-59.png
63.0 KB View Download
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