CSS Grid Overflow (tested)
By default, a grid track won't shrink a cell below its content's intrinsic minimum size — an implicit min-width: auto on every grid item. We measured exactly how far a 600px-wide, 3-column grid overflowed with one long unbreakable word, and tested two different fixes to see which one actually reached 0px of overflow.
1. Reproduced: the default overflow
A plain 3-column grid, 600px wide, with one cell containing a long unbreakable word:
.grid1 { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 600px; }Measured: the grid's scrollWidth was 631px against a clientWidth of 600px — 31px of overflow. The long-word cell itself measured 547px wide, far past its intended ~193px share. The column grew to fit the word's min-content size instead of respecting the 1fr split, and dragged the whole grid past its own 600px box.
2. Reproduced: minmax(0,1fr) stops the track growing — but doesn't stop the overflow
The standard advice is to replace 1fr with minmax(0,1fr), which overrides the implicit min-width: auto with an explicit 0:
.grid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); width: 600px; }Measured: the cell itself correctly shrank to 193px (its fair 1fr share) — the track-growth problem is fixed. But the grid's scrollWidth was 751px against the same 600px clientWidth: 151px of overflow, worse than before. The track stopped growing, but the unbreakable word doesn't care about its box — with no overflow or wrapping rule on the item, the text itself visually spills out of the now-narrower box, and that spill is still measured as overflow on the ancestor.
This is the part most "just add minmax(0,1fr)" advice skips: it fixes the grid math, not the text rendering.
3. Reproduced: the combination that actually reaches 0px overflow
.grid3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
.grid3 > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }Measured: scrollWidth 600px, clientWidth 600px — 0px overflow, confirmed. minmax(0,1fr) keeps the track from growing past its fair share, and overflow: hidden on the item (with text-overflow: ellipsis; white-space: nowrap if you want a visible cut-off marker instead of a silent clip) stops the content itself from spilling past the now-correctly-sized box. Either half alone was insufficient in our measurements — both are needed together.
4. Checklist
- Grid item growing past its track: add
min-width: 0to the item, or change1frtominmax(0,1fr)on the track. - Track size fixed but text still spilling out visually: that's a separate problem — add
overflow: hidden(plustext-overflow: ellipsis; white-space: nowrapfor single-line text, oroverflow-wrap: break-wordto let it wrap instead of clip) on the item itself. - Same issue in flexbox: flex items have the identical implicit
min-width: autodefault; the samemin-width: 0fix applies. - Verify, don't eyeball: check
element.scrollWidth - element.clientWidthin DevTools console; nonzero means something is still overflowing.
If content is overflowing because it's rendering behind or in front of the wrong element instead, that's a different bug — see CSS z-index Not Working. Our full-page screenshot tool is a fast way to see the actual rendered overflow before you start debugging CSS.
Frequently asked questions
Why does my grid item grow wider than its column and overflow the container?
We measured this directly: a 3-column 1fr grid with one long unbreakable word overflowed its 600px container by 31px, because grid items have an implicit min-width: auto that prevents a track from shrinking below the content's intrinsic minimum size. The fix is minmax(0,1fr) on the track or min-width: 0 on the item.
Does minmax(0,1fr) fully fix grid overflow?
Not by itself in our test. It stopped the track from growing (the cell measured the correct 193px), but the grid container still overflowed by 151px because the long word's text visually spilled past the now-narrower box. We only reached 0px overflow after also adding overflow: hidden (with white-space: nowrap) on the item.
Why did overflow get worse after I added minmax(0,1fr)?
Because minmax(0,1fr) only constrains the column track size — it doesn't constrain the rendered text inside the item. In our measurement, scrollWidth went from 631px (track growing to fit the word) to 751px (track staying narrow, but the word spilling out past it) — the overflow moved from the layout to the content, it didn't disappear, until overflow: hidden was added on the item too.
Is this the same bug as flexbox items overflowing?
Per the CSS spec, yes — flex items default to min-width: auto for the same reason grid items do, so a flex row with 1 1 0% children and long content overflows the same way. We measured the grid case specifically; the min-width: 0 fix on the item is the direct equivalent of minmax(0,1fr) on a grid track.
Should I use overflow: hidden or min-width: 0 to fix grid overflow?
Based on our measurements, you likely need both, addressing two different things: minmax(0,1fr) (or min-width: 0) on the track/item stops the column from growing past its fair share; overflow: hidden (plus text-overflow/white-space if it's text) on the item stops content from visually spilling past that now-correct box. We measured 151px of overflow remaining with only the first fix, and 0px once both were applied.
Written with AI assistance. Measured on 2026-10-03 with headless Chromium 153 (Playwright) on a real Linux box. Rendered widths are real getBoundingClientRect() values and scrollWidth/clientWidth deltas, not estimated. PlainHeaders is our extension; CSS is free.