min-content, max-content and fit-content, measured
Each box holds two 100px chips. min-content wraps them (100), max-content keeps them on one line (200), fit-content takes 200 when there's room and the available 150 when there isn't.
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
min-content: 100
max-content: 200
fit-content in 300px: 200
fit-content in 150px: 150