A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
<style>.field { width: 100%; padding: .75rem; }</style><main class="field">Example content</main>
A good CSS change narrows the problem. Set box-sizing globally for predictable component math, then reason about min-width, max-width, intrinsic content, and replaced-element behavior separately. This keeps the rule understandable when content, theme, or viewport conditions change later.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Width, Height, and Box Sizing | A 100% width input with content-box sizing can overflow its parent after padding is added. That bug often disappears when you switch to border-box. |
| 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 |
In production, A 100% width input with content-box sizing can overflow its parent after padding is added. That bug often disappears when you switch to border-box. That is the kind of bug that survives visual spot checks because the stylesheet is syntactically valid while the layout contract is wrong.
The useful mental model here is practical: how declared dimensions interact with padding, borders, intrinsic content, and box-sizing. When a rule looks obvious but the browser produces something else, start by identifying which constraint or rendering phase is actually winning.
<style>*, *::before, *::after { box-sizing: border-box; }</style><main class="demo">Example content</main>
Engineering judgment: Set box-sizing globally for predictable component math, then reason about min-width, max-width, intrinsic content, and replaced-element behavior separately.
<style>img { max-width: 100%; height: auto; }</style><main class="demo"><div aria-label="Example media" class="media-placeholder" role="img">Media example</div></main>
Min/max bounds is useful here because it demonstrates width, height, and box sizing under a concrete input rather than as an abstract property list.
<style>.panel { min-height: 20rem; }</style><main class="panel">Example content</main>
Viewport cap is useful here because it demonstrates width, height, and box sizing under a concrete input rather than as an abstract property list.
Finish the lesson once you have worked through the material. This awards ★ 20 XP.