Flexbox stretch vs CSS Grid auto rows for equal-height responsive card columns

Direct answer

CSS Grid is the more predictable choice for equal-height responsive card columns that contain nested grids with intrinsic content. Grid track sizing gives every cell in the same row one shared row height, while Flexbox align-items: stretch equalizes only within a single flex line. Wrapped flex rows are independent unless you add extra wrappers or fixed row heights.

Confirmed facts

• Grid track sizing computes one row track height from the contributions of every item in that track, so all cards in a row inherit the same height automatically.
• Flexbox align-items: stretch equalizes cross size only within one flex line; cards in later wrapped rows are not forced to match earlier rows.
• flex-basis: auto is content-derived, and flex items retain an automatic minimum size of min-content in the main axis unless overridden by min-width: 0 or similar, so variable nested grid content can force wider items and overflow instead of shrinking.
• Grid track sizing is track-level: min-content and max-content contributions from every item in the track determine the track size, then tracks grow to fill available container space.

Likely explanation

A nested grid child does not automatically stretch to fill a stretched flex card. Equal card height alone does not equalize inner grid rows; the nested grid needs an explicit stretch contract such as height: 100% on the child.

Cross-browser overflow variance is most likely an implementation or interoperability gap in min-content contribution, automatic minimum sizes, and percentage resolution in indefinite flex containers, rather than a change to the core stretch or grid-track algorithms. This remains unverified against current browser releases.

How flex-basis differs from grid track sizing with min-content

flex-basis sets an item-level main-size starting point before free-space distribution. With flex-basis: auto, the size is content-derived and the automatic minimum size can prevent shrinking below min-content. Grid track sizing derives min/max track functions from contributions of every item in the track, so one wide nested grid can expand the row track for every card in that row.

Recommended steps for this case

1. Set the card container to display: grid with grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)), adjusting the lower bound at breakpoints so the column count stays fluid without collapsing to one track.
2. Let default grid track behavior equalize cards in the same row; avoid relying on grid-auto-rows: auto to equalize cards across separate rows.
3. Inside each card, set the nested grid child to height: 100% so intrinsic content stretches to the card boundary instead of overflowing.
4. If Flexbox is required as a fallback, add min-width: 0 to flex items and wrap each row in a container when equal height across wrapped rows is required.

Verification

Render a minimal container with variable card content and a nested grid child at several breakpoints in each target browser. Compare computed card heights within a row, then toggle flex item min-width: 0 versus auto and nested grid height: auto versus height: 100%. Check whether overflow appears and whether inner rows stretch.

Missing diagnostic detail

Confirm whether equal height is required only within each row or across all rows at once. If every card must match regardless of row, neither plain Flexbox wrapping nor implicit Grid auto rows alone guarantees it; you need explicit row tracks, subgrid, or an extra wrapper. This detail changes the Flexbox versus Grid recommendation.

Assumptions and uncertainty

Assumptions: CSS Grid is baseline in current evergreen browsers; subgrid support is newer and not universal. Older browsers may have buggy min-width: auto behavior on flex items containing grid containers.

Uncertainty: browser-specific overflow variance should be treated as an implementation question pending direct testing in your target browser set.