CSS Tutorial
CSS Overflow
When content is too big for its box, overflow decides what happens: let it spill, clip it, or add scrollbars. It is essential for scroll areas, cards with fixed heights, and preventing layout breakage.
The overflow property
An element with a set height or width can hold more content than it has room for. The overflow property tells the browser how to handle the excess. It only has an effect when the box is actually constrained — usually by a fixed height or a width narrow enough to force clipping.
| Value | Behaviour |
|---|---|
| visible | Default — content spills outside the box |
| hidden | Extra content is clipped and cannot be seen |
| scroll | Always shows scrollbars, even if not needed |
| auto | Shows scrollbars only when content overflows |
Comparing the four values
Each box below is the same fixed height but uses a different overflow value. Watch how visible spills, hidden clips, and scroll/auto add scrollbars.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; }
.box {
height: 70px;
width: 200px;
border: 2px solid #2563eb;
margin-bottom: 24px;
padding: 6px;
}
.v { overflow: visible; }
.h { overflow: hidden; }
.s { overflow: scroll; }
.a { overflow: auto; }
</style>
</head>
<body>
<div class="box v">visible: This paragraph is deliberately long so the text spills right out below the blue border.</div>
<div class="box h">hidden: This long paragraph is clipped, so any text past the box edge simply disappears.</div>
<div class="box a">auto: This long paragraph gets a scrollbar only because it does not fit inside the fixed height.</div>
</body>
</html>Scrolling only one direction
overflow-x controls horizontal overflow and overflow-y controls vertical overflow. A common use is a wide table or code block that scrolls sideways while the page itself does not.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 16px; }
.scroller {
width: 240px;
overflow-x: auto; /* scroll sideways */
overflow-y: hidden;
white-space: nowrap; /* keep on one line */
border: 2px solid #16a34a;
padding: 10px;
}
.chip {
display: inline-block;
background: #16a34a;
color: white;
padding: 8px 14px;
margin-right: 6px;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="scroller">
<span class="chip">Pune</span>
<span class="chip">Mumbai</span>
<span class="chip">Bengaluru</span>
<span class="chip">Hyderabad</span>
<span class="chip">Delhi</span>
</div>
</body>
</html>overflow: hidden also clips things you might want, like tooltips or dropdowns escaping the box. Use auto when you only want scrollbars if they are truly needed.
Key points
- overflow controls what happens to content that does not fit its box.
- visible spills, hidden clips, scroll always scrolls, auto scrolls only when needed.
- overflow-x and overflow-y control a single axis independently.
- overflow only matters when the box has a constrained size.