Intrinsic sizing: the CSS rules behind mysterious overflow

When a layout overflows for no obvious reason, the browser is often protecting content from becoming smaller than its intrinsic minimum. That protection is useful, but it surprises developers who expect 1fr or width: 100% to always mean “fit the available space.”

Intrinsic sizing is the browser asking: how large would this content like to be if nobody constrained it?

The terms that matter

min-content is the smallest size content can take without avoidable overflow. For text, that often means the longest unbreakable word. For a table, it can be the sum of columns that refuse to shrink.

max-content is the size content wants if it never has to wrap.

fit-content clamps content between available space and intrinsic limits.

These concepts show up even when you never write the keywords.

Why 1fr can overflow

In Grid, a track sized as 1fr can still respect the min-content size of its children. A long code sample can force the track wider than the viewport.

.layout {
  display: grid;
  grid-template-columns: 16rem 1fr;
}

The production version should usually be:

.layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
}

.layout > * {
  min-inline-size: 0;
}

That does not hide overflow. It allows the flexible track and its children to shrink so normal overflow handling can happen where you expect it.

Sizing is not just width

Use logical properties when possible. min-inline-size: 0 solves the inline axis in horizontal writing modes, but it also communicates the real intent better than min-width: 0. In layout systems that may support different writing modes, this distinction becomes more than style preference.

The debugging move

When a component refuses to shrink, inspect three things:

1. The grid or flex item’s minimum size.
2. Any descendant with fixed inline size.
3. Content that cannot break, such as URLs, code, long labels, and tables.

Then decide where overflow belongs. Sometimes the fix is overflow: auto on a code block. Sometimes it is minmax(0, 1fr) on a grid track. Sometimes it is adding overflow-wrap: anywhere to a label that can safely break.

Intrinsic sizing is not an edge case. It is one of the browser’s main layout inputs.