CSS Grid minmax(min-content, auto) overflow in nested flex containers

The Solution

To force a grid track to respect the shrink limits of a nested flex container and prevent horizontal overflow, apply min-width: 0 (or min-height: 0 for rows) to the flex container that serves as the grid item.

.grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, auto) 1fr;
}

.flex-item-grid-child {
  display: flex;
  min-width: 0; /* Prevents the flex container from expanding the grid track */
}

Why This Happens

The overflow occurs because of a conflict between how CSS Grid calculates intrinsic sizes and how Flexbox handles minimum dimensions. By default, flex items have min-width: auto. This means a flex container will not shrink smaller than the minimum size of its own content.

When the grid track is set to minmax(min-content, auto), the browser asks the child (the flex container) for its min-content size. Because the flex container's default min-width is auto, it reports a size based on its widest unbreakable child. This creates a layout loop: the grid track expands to accommodate the flex container's minimum size, which in turn is dictated by the content, effectively ignoring the intended shrink behavior of flex-shrink.

Engine-Specific Behavior

While both Blink (Chrome/Edge) and WebKit (Safari) generally follow the CSS Flexible Box Layout specification, they may differ in the timing of layout passes when calculating nested intrinsic sizes. In some versions, WebKit may be more aggressive in expanding the track to fit the content's intrinsic width before applying flex-shrink constraints, making the min-width: 0 override essential for cross-browser consistency.

Verification Steps

1. Define a grid with a column using minmax(min-content, auto).
2. Place a flex container inside that column containing a long, unbreakable string or a fixed-width element.
3. Observe the horizontal overflow in the browser.
4. Apply min-width: 0 to the flex container.
5. Verify via Developer Tools that the computed width of the grid track has decreased and the content is now clipped or wrapping as expected.

Note: If you apply min-width: 0, ensure that the innermost content has overflow: hidden or text-overflow: ellipsis if you wish to avoid raw content clipping.

Diagnostic Detail: Are the nested flex items using flex-basis values in absolute units (px) or relative units (%), as this may alter the reported min-content size?