freecoding.school100% FREE · NO SIGNUP
Grid CanyonISSUE #5 of 27

overflow · visible · hidden · scroll · auto

FlexboVSThe Float Phantom
Flexbo saysoverflow decides what happens when content is too big: visible, hidden, scroll, or auto.

When content exceeds its box, overflow rules. visible (default) spills out; hidden clips; scroll always shows bars; auto shows them only when needed. overflow-x/overflow-y target one axis. Hidden also clips children to rounded corners.

Power-ups you unlock

The Float Phantom attacks — common mistakes

Boss battleMake a fixed-height box scroll its overflowing text with overflow:auto.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>.b{height:80px;overflow:auto;background:#140a28;color:#e6e0ff;padding:10px}</style></head><body style="background:#06040d;padding:20px"><div class="b"><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p></div></body></html>
▶ Open the interactive comic issue
‹ Z-Index · Stacking ContextsFloat · Clear · The Legacy Layout ›