Bugzilla

(Briefly, the issue here is that Firefox is interpreting the default `min-width:auto` as forcing the grid item, i.e. the flex container, to be as wide as its content.  So `justify-content` doesn't have any work to do inside of that flex container, because the flex container is exactly the right size -- there isn't any positive or negative space to distribute.

This is generally the correct thing to do for grid items, except for this particular special case where the item spans a flexible track, which is what bug 1530097 is about.

If you set `min-width:0` on the grid item (the flex container), then that lets it shrink to be smaller than its contents, to fit its grid area, and *then* it does end up having some negative space to distribute when it does its own layout, which it applies using `justify-content:space-around` by displacing its children off to the left a bit.

Briefly, the issue here is that Firefox is interpreting the default `min-width:auto` as forcing the grid item, i.e. the flex container, to be as wide as its content.  So `justify-content` doesn't have any work to do inside of that flex container, because the flex container is exactly the right size -- there isn't any positive or negative space to distribute.  It just positions its content at its own 0,0 position.

This is generally the correct thing to do for grid items with `min-width:auto` (forcing them to be as wide as their content), except for this particular special case where the item spans a flexible track, which is what bug 1530097 is about.

If you set `min-width:0` on the grid item (the flex container), then that lets it shrink to be smaller than its contents, to fit its grid area, and *then* it does end up having some negative space to distribute when it does its own layout, which it applies using `justify-content:space-around` by displacing its children off to the left a bit.

Briefly, the issue here is that Firefox is interpreting the default `min-width:auto` as forcing the grid item, i.e. the flex container, to be as wide as its content.  So `justify-content` doesn't have any work to do inside of that flex container, because the flex container is exactly the right size -- there isn't any positive or negative space to distribute.  It just positions its content at its own 0,0 position.

This is generally the correct thing to do for grid items with `min-width:auto` (forcing them to be as wide as their content), except for this particular special case where the item spans a flexible track, which is what bug 1530097 is about.

If you **explicitly** set `min-width:0` on the grid item (the flex container), then that lets it shrink to be smaller than its contents, to fit its grid area, and *then* it does end up having some negative space to distribute when it does its own layout, which it applies using `justify-content:space-around` by displacing its children off to the left a bit.

Briefly, the issue here is that Firefox is interpreting the default `min-width:auto` as forcing the grid item, i.e. the flex container, to be as wide as its content.  So `justify-content` doesn't have any work to do inside of that flex container, because the flex container is exactly the right size -- there isn't any positive or negative space to distribute.  It just positions its content at its own 0,0 position.

This is generally the correct thing to do for grid items with `min-width:auto` (forcing them to be as wide as their content), except for this particular special case where the item spans a flexible track, which is what bug 1530097 is about.

If you **explicitly** set `min-width:0` on the grid item (the flex container), then that lets it shrink to be smaller than its contents, to fit its (smaller) grid area.   And *then* the flex container does end up having some negative space to distribute when it lays out its children, which it applies using `justify-content:space-around` by displacing its children off to the left a bit.