A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | min-content, max-content, and fit-content | max-content can create overflow when the content is long, while min-content can create narrow columns with aggressive wrapping. |
| Production test | Real content and constraints | The rule works only for the demo values |
| Maintenance | Scope and override path | A later fix creates another exception |
The useful mental model here is practical: how intrinsic keywords expose the smallest and largest natural size the content wants. When a rule looks obvious but the browser produces something else, start by identifying which constraint or rendering phase is actually winning.
<style>.demo { width:min-content; }</style><main class="demo">Example content</main>
Engineering judgment: Use intrinsic keywords as intentional constraints, not magic values.
The useful mental model here is practical: how intrinsic keywords expose the smallest and largest natural size the content wants. When a rule looks obvious but the browser produces something else, start by identifying which constraint or rendering phase is actually winning.
<style>.demo { width:max-content; }</style><main class="demo">Example content</main>
A good CSS change narrows the problem. Use intrinsic keywords as intentional constraints, not magic values. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>.demo { width:fit-content(20rem); }</style><main class="demo">Example content</main>
Example 3 is useful here because it demonstrates min-content, max-content, and fit-content under a concrete input rather than as an abstract property list.
<style>.demo { grid-template-columns:max-content 1fr; }</style><main class="demo">Example content</main>
Example 4 is useful here because it demonstrates min-content, max-content, and fit-content under a concrete input rather than as an abstract property list.
Finish the lesson once you have worked through the material. This awards ★ 30 XP.