A card inside a CSS Grid layout overflows its column on narrow screens, even though the grid’s own column width looks correctly defined.
⚡ Quick Fix (TL;DR)
The Culprit: CSS Grid items default to min-width: auto, meaning a grid item won't shrink below its own content's natural minimum width – even a single card elsewhere in the same grid with a wide, unbreakable string (a long code block, an unbroken URL) can force the shared column wider for every card in that grid, not just the one that contains it.
The Fix: Explicitly override the default by setting min-width: 0 directly on the grid item. This allows it to shrink as intended and rely on internal wrapping or scrolling, instead of silently inheriting a sibling's content-driven minimum width.
.grid-item {
min-width: 0;
}Tagged in :
More from the field
Bisect to an Empty Baseline Before Trusting Any Single Theory
.
Multiple plausible-sounding theories for a bug each turned out to be wrong when actually tested – time was spent building fixes…
A Security Dashboard’s Activity Log Can Lag a Full Day Behind Real Time
.
Trying to check a security tool’s activity log for an event that had just happened showed nothing at all.