Firefox, Edge don’t stretch fit-content() tracks by default

[simevidas]

Code:

.grid {
    display: grid;
    grid-template-columns: repeat(3, fit-content(100px));
}

Demo: https://codepen.io/simevidas/pen/LjLJgo?editors=0100

I’ve noticed that in Firefox and Edge 16 (the upcoming version with full Grid support), when you have a bunch of columns clamped with fit-content(), the columns don’t stretch when there is more space available in the grid container. In Chrome, they do.

This isn’t a big problem, since, when I’m restricting the max size with fit-content(), I don’t want the tracks to extend beyond this size, so I can just set justify-content: start to disable stretching explicitly.

[rachelandrew]

I think Chrome is incorrect here, fit-content should be clamping to the size you have set (100px). Would you agree?

[simevidas]

Actually, I agree. I don’t know why I assumed Chrome was right. If fit-content() could be stretched, the spec would say so, like is says for auto.

[rachelandrew]

I've logged it as a Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=755994

I think Firefox has this one correct, WebKit is showing the same behaviour as Chrome. Anyway it is definitely an interop problem so I'll add it to the list.

[rachelandrew]

On the listing as #14

Thanks!