debugging a weird css grid issue

I ran into one of those CSS bugs that makes you question your career choice. A grid layout that looked fine in Firefox but completely broke in Chrome. Classic.

The problem

I had a simple two-column grid:

.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
}

The left column had a code block inside it. In Firefox, everything was fine. In Chrome, the code block was overflowing and pushing the entire grid wider than the viewport.

Here’s a diagram of what was happening:

Expected:                    What Chrome did:
┌──────────┬────────┐       ┌──────────────────┬────────┐
│  content │ sidebar│       │  content (overflows→→→→→→) │
│          │        │       │                  │ sidebar│
└──────────┴────────┘       └──────────────────┴────────┘

The fix

After an embarrassing amount of time, I found the answer. Grid items have min-width: auto by default, which means they won’t shrink below their content size. Adding min-width: 0 to the grid item fixes it:

.layout > * {
  min-width: 0;
}

That’s it. One line. The pre element inside the grid item was setting the minimum size, and the grid was happily obliging.

Why this happens

The CSS Grid spec says that grid items have min-width: auto and min-height: auto by default. For most elements this is fine, it’s the same as min-width: 0. But for elements with intrinsic sizing (like pre with a long line of code, or img), auto resolves to the content’s intrinsic minimum width.

This is actually useful behavior in many cases: you usually don’t want images to be squished to 0 width. But for text content that should scroll horizontally (like code blocks with overflow-x: auto), it breaks things.

The irony is that the overflow property only works when the element can actually be smaller than its content. With min-width: auto, it can’t.

Video demonstration

Here’s a short video showing the before/after:

(placeholder video, imagine the grid snapping into place)

Lessons learned

1. Check min-width when grid items overflow.
2. Test in multiple browsers. Firefox and Chrome handle grid sizing differently.
3. Read the spec when something doesn’t make sense. The answer is usually in there.
4. Keep a debugging journal. I’ve hit this exact issue twice and forgot the fix both times.

The full CSS Grid spec section on automatic minimum size is worth reading if you work with grids regularly.

---

Sometimes the fix is one line but the understanding takes hours. That’s just how CSS works.