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 1 user

Issue metadata

Status: Fixed
Closed: Sep 2017
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, Aug 16 2017 Back to list

Issue description

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

1.8 KB Download

Comment 1 by, Aug 16 2017

Components: -Blink>Layout Blink>Layout>Grid
Labels: -OS-Mac OS-All
Status: Available (was: Unconfirmed)

Comment 2 by, Aug 17 2017

Status: Started (was: Available)
So I thought this was a clear issue and I've already a patch for it:

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 (
  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> ) (
  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

Comment 3 by, Aug 18 2017

There's now an issue on CSS WG to clarify this behavior:

Comment 4 by, Sep 21 2017

The CSS WG has resolved that fit-content() tracks are not affected by stretch:
Project Member

Comment 5 by, Sep 21 2017

The following revision refers to this bug:

commit 35e2a9abf7079cd07c5cff9e3b1b8bc2a5f183b8
Author: Manuel Rego Casasnovas <>
Date: Thu Sep 21 14:09:23 2017

[css-grid] fit-content() tracks shouldn't stretch

The spec is pretty clear regarding this
  "This step sizes expands tracks that have an auto max track sizing
  function by dividing any remaining positive, definite free space
  equally amongst them."

The fit-content() tracks don't have an auto max track sizing function,
so they shouldn't be considered in this step of the algorithm.

The patch modifies GridTrackSizingAlgorithm::InitializeTrackSizes()
so it doesn't consider fit-content() tracks as auto sized ones
(which are the ones later stretched in the last step of the algorithm).

Added new case to an existent test and also modified
the expected result in another one.
On top of that add a new test in WPT covering more cases.

BUG= 755994 

Change-Id: Ic4ffb83518f0e0ca879196c5bb4dd997c373c66b
Commit-Queue: Manuel Rego Casasnovas <>
Reviewed-by: Sergio Villar <>
Reviewed-by: Javier Fernandez <>
Cr-Commit-Position: refs/heads/master@{#503437}

Comment 6 by, Sep 21 2017

Status: Fixed (was: Started)

Sign in to add a comment