Boxes and sizing · Lesson 7 of 17
Overflow and image fitting
overflow, object-fit and robust layouts.
8 minutes1 games
When content exceeds its box, overflow controls visibility, clipping or scrolling. overflow:auto scrolls when needed. Use overflow-wrap for long text and object-fit:cover or contain for images in fixed-size boxes, depending on whether cropping is acceptable.
HTML
<style>
.box {max-width:220px;max-height:100px;overflow:auto;overflow-wrap:anywhere;border:1px solid;padding:12px;}
</style>
<div class="box">averylongwordwithoutspaceswhichmustnotbreakthelayout<p>More content</p><p>More content</p><p>Last line</p></div>.box { overflow: auto; }Compare how each setting affects access to content.
Exercise
Limit .box to 100px height and allow scrolling when needed.
HTML
<style></style><div class="box"><p>One</p><p>Two</p><p>Three</p><p>Four</p></div>
Learn more from
Played 0 of 1 games
Sign in to save your progress and earn XP.