CSS Overflow
The overflow property decides what happens when content is bigger than its box. Clip it, hide it, scroll it, or just let it spill.
Values
| Value | Behaviour | Use it for |
|---|---|---|
visible | Content spills outside the box (default). | Tooltips, dropdowns that need to escape their parent. |
hidden | Overflow is clipped. No scrollbar. | Card thumbnails, decorative crops. |
scroll | Scrollbars always shown, even when not needed. | Avoids layout shift when content grows. |
auto | Scrollbars only when needed. | The default choice for scrollable panes. |
clip | Like hidden but no scrollbox is created — children with sticky positioning still work. | Modern crop with sticky kids. |
Per-axis control
CSS
.code-block { overflow-x: auto; overflow-y: hidden; } /* horizontal scroll only */
.table-wrap { overflow-x: auto; } /* mobile-friendly wide table */
Note: Setting any value other than
visible creates a new block formatting context. That's the modern way to contain floats — overflow: hidden stops floated children from poking out.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Overflow</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Show a horizontal scrollbar only when this code block is too wide.
.code { overflow-x:
; }
It shows scrollbars only when needed.
Discussion
Loading…