CSS intrinsic sizing: let content set limits without forcing overflow

How the rule works

A shipment table has a compact status badge beside a description. Let the badge use its content width, but cap the description against the region's available width. A long tracking token has few break opportunities, so its min-content width may still be wide enough to overflow; add an explicit wrapping rule for data that can safely break. Intrinsic sizing is not an automatic solution to every narrow layout. It is a way to express how much the content asks for before external constraints apply. Verify the rendered values with real identifiers, translated labels, and a small viewport. An ellipsis can hide a critical identifier, so prefer wrapping for records that must be read in full.

.shipment-row { display: grid; grid-template-columns: fit-content(9rem) minmax(0, 1fr); gap: 1rem; }
.shipment-row__status { inline-size: max-content; max-inline-size: 9rem; }
.shipment-row__description { min-inline-size: 0; overflow-wrap: anywhere; }

Cost and verification

The browser must measure content to determine intrinsic sizes, so large, frequently changing tables can make layout more expensive than fixed tracks. For a modest record list this is usually a reasonable trade for readable content. The fit-content cap does not guarantee that every badge fits without wrapping; the max-inline-size and available track size still matter. Test the longest expected status label rather than a two-word placeholder. If the table is huge, paginate and measure before seeking a CSS micro-optimization.

Common Mistakes

• Do not equate min-content with zero width.
• Do not clip a legally significant identifier to preserve a neat column.
• Do not add max-content to user text without a width limit.

Connected lessons

• CSS Layout
• CSS grid tracks: reserve a sidebar without letting content widen the page
• CSS overflow: contain long data without losing controls
• CSS text wrapping and truncation: keep records readable

Related behavior decisions

• CSS interpolate-size: animate toward content height carefully