max-width, min-width, aspect-ratio and percentage heights
The video is capped at 320px and its height follows the ratio. The 50% height can't resolve, so the box is just as tall as its content.
A box's size comes either from outside (the space its parent gives it, or a width you set) or from inside (its content); min-*, max-*, the keywords min-content, max-content and fit-content, and aspect-ratio let you mix the two safely.
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 5 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 .tag that hugs its text with 4px 10px padding, and log whether it is narrower than its 400px parent.
Make a square .thumb that is 25% of a 480px parent, using aspect-ratio. Log its width and height.
Make a card that is 100% wide but at most 360px, inside a 500px and a 300px parent. Log both widths.
Explain it without notes
What is the difference between intrinsic and extrinsic sizing?
Define min-content, max-content and fit-content.
Why doesn't height: 50% work inside a parent with height: auto?
How does aspect-ratio decide the height, and when does it not hold?
What happens when min-width and max-width conflict?
Preview
Console
Nothing logged yet.Expected console output
video: 320 x 180
min-width beats max-width: 400
50% of an auto-height parent: 30