Stop a flex or grid child from overflowing its container

Set min-width: 0 on the child that refuses to shrink. Flex and grid items default to min-width: auto, which means “never smaller than my content”, so a long URL, a wide <pre> or a table pushes the item past its track.

.cell {
  min-width: 0;
}

For a column layout that overflows vertically, the same rule is min-height: 0.

How to recognise it

• A sidebar and a main column, and the main column’s code block makes the whole page scroll sideways.
• text-overflow: ellipsis does nothing on a flex item, because the item grew to fit the text instead of clipping it.
• A grid-template-columns: 1fr 1fr where one column is wider than the other.

In every case the container is the right width; the item inside it is wider than its share.

Why auto is the default

The spec sets min-width: auto on flex and grid items so that content is never clipped by accident. It’s the right default for a button label, and the wrong one for anything holding user or code content. Set it to zero on the layout cell, then handle the content inside with overflow: auto, overflow-wrap: anywhere or truncation, whichever the content wants.

.main {
  min-width: 0;
}
.main pre {
  overflow-x: auto;
}

Gotchas

• overflow: hidden on the item also resets the automatic minimum, which is why it sometimes “fixes” this. It clips instead of scrolling, so prefer min-width: 0 and choose the overflow behaviour separately.
• 1fr is minmax(auto, 1fr). Write minmax(0, 1fr) to get a grid track that really can shrink.
• flex: 1 sets flex-basis: 0 but not min-width, so it doesn’t help on its own.