The Minimum Content Size In CSS Grid

Ahmad recently encountered an issue where a CSS Grid column grew too large:

.wrapper {
    display: grid;
    grid-template-columns: [main] 1fr [aside] 16em;
    grid-gap: 2em;
}

The main column has a 1fr value. That means it will take the available space minus the sidebar and the gap. However, the minimum content size of a grid item is min-content. That means a grid item can expand its width due to long content (In our case, a nested scrolling container).

Coincidentally, this is exactly what Chris wrote about on CSS-Tricks earlier this week. The fix is to use minmax(0, 1fr), so that the minimum content size won’t be min-content, preventing this “Grid Blowout”.

The Minimum Content Size In CSS Grid →
You want minmax(10px, 1fr) not 1fr →