The zero-width trap
An inline-block normally takes the width of its text. With inline-size containment its width is calculated as if it were empty, so only its padding and border remain (18px) and the text spills out. Make the parent the container instead.
Container queries let a component respond to the size of its own container instead of the whole window: mark an ancestor with container-type: inline-size, then write @container (min-width: 400px) { ... }, and size things with container units like cqi.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a .profile component stack its avatar above its text by default and place them side by side when its container is at least 360px wide.
Inside a container named widget, hide .extra when the widget is narrower than 250px. Make sure a nested container doesn't answer instead.
Make a card title scale with the card width between 1rem and 1.75rem.
Explain it without notes
What problem do container queries solve that media queries can't?
What does container-type: inline-size do, and why is it required?
Why can a container collapse to zero width, and how do you avoid it?
What are container query units, and what do they fall back to?
Preview
Console
Nothing logged yet.Expected console output
normal: has width
container: collapsed to 18px