[css-grid] Grid item's child with 'overflow: hidden' doesn't hide contents




8 months ago
8 months ago


(Reporter: Brandon Frohs, Unassigned)



54 Branch

Firefox Tracking Flags

(Not tracked)



(3 attachments)



8 months ago
Created attachment 8886302 [details]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:54.0) Gecko/20100101 Firefox/54.0
Build ID: 20170612122310

Steps to reproduce:

Set 'overflow:auto' or 'overflow:hidden' on the child of a grid item with contents that are wider than the grid container.

Actual results:

The contents overflow the container.

Expected results:

The overflowing contents should be hidden (if 'overflow:hidden').

Comment 1

8 months ago
Created attachment 8886304 [details]


8 months ago
Component: Untriaged → Layout
Keywords: testcase
Product: Firefox → Core
If you look at your testcase in the devtools Inspector, you can see that the div with "overflow:hidden" is actually as wide as its text (i.e. nothing is overflowing from it).  And its parent div is that wide as well.

So the problem is really just that the parent <div> (the grid item) is bigger than you're expecting it to be. It's large because of the special min-width:auto behavior for flex & grid items, which makes them refuse to be smaller than their contents' min-content width.  This is described here: https://drafts.csswg.org/css-grid-1/#min-size-auto (follow the links through to the flexbox spec for more detail).

You can disable that behavior by giving that div "min-width:0" if you like.

So I'm pretty sure we're following the spec here.
Last Resolved: 8 months ago
Resolution: --- → INVALID
Created attachment 8886347 [details]
testcase with "min-width:0" added on the grid item so that it's allowed to be skinnier than its contents' min-content size
(My just-attached testcase is the same as your original testcase, but with "min-width:0" added to the grid item -- and it gives the behavior you were expecting.)

Comment 5

8 months ago
You're right, that does seem to match spec (although it feels strange from an author's standpoint). And thanks for the workaround!

However, if I'm reading it correctly, then setting the min track sizing function to something other than auto (eg, 5em) should work around this as well?

> ...applies an automatic minimum size in the specified axis to grid items [...] which span at least one track whose min track sizing function is auto.

So, replacing `grid-template-columns: 1fr` on `.wrapper` with `grid-template-columns: minmax(5em, 1fr)` should fix the issue, yes? I've tried it and while the grid highlighter is showing the proper result, the text is still not cut off and the grid item still overflows the container (even though the grid highlighter is showing that the column ends in the proper spot). Maybe I'm misreading? But I'm assuming there's some sort of bug here since the grid highlighter changes but the layout doesn't.
You're talking in comment 5 about the size of the *track* (and how to reduce it), but the key thing here is the size of the *grid item*.

The track (or really the grid area formed by two intersecting tracks) is the containing block for the grid item, but the grid item can still be larger or smaller than its grid area.  (e.g. if you give the grid item "height: 6000px; width: 6000px" then it'll be that big, regardless of the track sizes. The same is true here.)

If you like, it might help to visualize this by adding e.g. "justify-self: center" to your grid item -- then it'll center itself in its (smaller-with-your-minmax-tweak) grid area, rather than just overflowing off the end side.

>  But I'm assuming there's some sort of bug here since the grid highlighter changes but the layout doesn't.

The grid highlighter only shows the tracks.  And it sounds like it's showing them correctly.  The layout doesn't necessarily change when the tracks change, though, if the grid item's size is determined by something other than the track size (as is the case here).
You need to log in before you can comment on or make changes to this bug.