Design AtlasThe core is two lines: .switcher { display: flex; flex-wrap: wrap }, and on each child, flex-grow: 1; flex-basis: calc((var(--threshold) - 100%) * 999). When the switcher's own width is wider than --threshold (say 30rem), (threshold - 100%) evaluates negative, so flex-basis comes out negative — and a negative flex-basis is treated as 0, letting items sit evenly in one row purely via flex-grow: 1.
Once the switcher's width drops below --threshold, (threshold - 100%) turns positive, and multiplying by 999 blows that value up into something enormous. With flex-basis effectively infinite, each item demands an entire row to itself, and flex-wrap: wrap drops them one by one onto the next line — a vertical stack.
The crucial difference from a media-query version is what's being measured. A media query checks the browser window's width; this calculation checks the switcher's own actual width. Put the same switcher in a wide main area and a narrow sidebar at the same time, and — at one single viewport width — one lays out horizontally while the other stacks, each responding to its own space.
When to use
Use it for reusable components with exactly two modes — row or stack — like a tab bar versus a vertical menu, or a two-column form versus one column. For more than two intermediate states, container queries express the intent more clearly.