The Intrinsic and Container-Based Sizing pattern

The Intrinsic and Container-Based Sizing allows elements to adapt naturally to their content or surrounding container. This makes interfaces more flexible, modular, and maintainable—especially useful in responsive design where fixed dimensions often lead to breakage or visual imbalance.

How the pattern works

Intrinsic sizing uses properties such as min-content, max-content, fit-content, and auto to allow elements to grow or shrink based on their internal content. Container-based sizing, on the other hand, leverages container queries and layout-aware rules that apply styles based on the size of a containing element, not just the viewport.