Boxes and sizing · Lesson 6 of 17
Units and flexible sizing
px, rem, %, min, max and clamp.
8 minutes1 games
px is a CSS length unit; rem is relative to the root font size. Percentages depend on the property and containing block. min and max choose sizes; clamp sets a minimum, preferred value and maximum. Combine flexible width with max-width to keep content manageable.
HTML
<style>
.panel { width: min(100%, 32rem); padding: 1rem; box-sizing: border-box; background:#e0f2fe; }
.panel h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
</style>
<section class="panel"><h2>Flexible title</h2><p>Resize the preview.</p></section>.panel { width: 100%; }Observe width relative to the container.
Exercise
Give .box width 100%, max-width 300px and border-box sizing.
HTML
<style></style><div class="box">Box</div>
Learn more from
Played 0 of 1 games
Sign in to save your progress and earn XP.