Design AtlasThe usual way to make "sidebar plus content" responsive is a hardcoded breakpoint: @media (max-width: 768px) { flex-direction: column }. But when this layout should actually stack depends on the combined minimum widths the sidebar and content need — not on the viewport size — and a media query has no idea about that.
Every Layout's trick hands that judgment to CSS itself with three declarations: display: flex; flex-wrap: wrap on the parent, flex-basis: 12rem on the sidebar, and flex-basis: 0; flex-grow: 999; min-width: 50% on the content. The content's flex-grow: 999 means "take almost all the leftover space when there is any"; min-width: 50% means "wrap to the next line once my available width drops below half the container." Where those two conditions collide, flex-wrap fires automatically.
The advantage is that "how narrow before it stacks" is a single number (the min-width percentage) scaled to the container's own size. Drop the same sidebar component into a full-width page or a narrow modal, and it responds correctly in either context — a pure-CSS, container-aware solution that predates container queries.
When to use
Use it for a secondary region that's narrower and closer to a fixed width than the main content — an app shell's nav sidebar, a table of contents beside an article, an options panel next to a product page. If the sidebar must stay pinned while scrolling, pair it with position: sticky.