`1fr` vs `minmax(0, 1fr)`: Prevent Grid Overflow

.result-grid {
  grid-template-columns: 88px 1fr;
}

.result-grid {
  grid-template-columns: 88px minmax(0, 1fr);
}
.result-output {
  min-width: 0;
  overflow-x: auto;
}

Root cause

An fr unit distributes leftover space, but a track written as 1fr still has an automatic minimum. When a grid item contains a long unbroken value, that content can establish a minimum wider than the free space. The track then grows and the document overflows.

minmax(0, 1fr) makes the intended lower bound explicit. The track can become smaller than its min-content contribution while continuing to receive the remaining space.

Confirm which track establishes the floor

Use the browser’s grid inspector and compare the grid’s content width with the long item’s scroll width. In the controlled fixture, the fixed first track is stable and the nominally flexible second track expands. Replacing only that second track with minmax(0, 1fr) makes the grid fit immediately, which distinguishes the track-sizing cause from padding, viewport units, or an unrelated fixed-width ancestor.

The item inside the track still needs its own content decision. The fixture gives its command output a local scroll area because preserving the exact string matters. A translated label or normal paragraph would use wrapping instead. Testing both the grid boundary and the descendant’s reachability prevents a zero minimum from becoming an accidental clipping technique.

When this fix is not enough

The wide descendant still needs an intentional behavior. Code and data may use a reachable local scrollbar, while ordinary prose may need wrapping. A zero track minimum should not be used to hide clipped controls or inaccessible content.

Regression condition

At narrow viewports, the failing grid should produce page-level overflow. The fixed grid must remain within the page, and its long command must remain accessible through the local output region.