What is Overflow?
Overflow happens when content is larger than the box that contains it. The overflow property decides what happens to the content that doesn’t fit.
overflow Values
| Value | Behavior |
|---|---|
| visible | Default. Content spills outside the box, unclipped |
| hidden | Extra content is clipped and invisible |
| scroll | Always shows scrollbars, even if not needed |
| auto | Shows scrollbars only when content actually overflows |
overflow: auto
<style>
.scroll-box {
width: 250px;
height: 100px;
overflow: auto;
border: 1px solid #ccc;
padding: 10px;
}
</style>
<div class="scroll-box">
This box has a fixed height, and this text is long enough
to overflow it, so a scrollbar automatically appears thanks
to overflow: auto. Keep scrolling to see the rest of this
paragraph inside the scrollable box.
</div>Output
overflow-x and overflow-y
overflow can also be controlled independently per axis with overflow-x (horizontal) and overflow-y (vertical), useful for horizontally scrolling carousels while keeping vertical overflow hidden.
Horizontal Scroll Only
<style>
.carousel {
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
padding: 10px;
width: 260px;
}
.carousel div {
flex: 0 0 100px;
height: 60px;
background: steelblue;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="carousel">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>Output
Truncating Text with Ellipsis
A common pattern combines overflow: hidden, text-overflow: ellipsis, and white-space: nowrap to truncate long text with a trailing "…" instead of wrapping or overflowing.
Text Truncation
<style>
.truncate {
width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #ccc;
padding: 4px 8px;
}
</style>
<div class="truncate">This is a long piece of text that will be truncated</div>Output
Best Practice
Prefer overflow: auto over overflow: scroll in most cases — it avoids showing empty scrollbars when there’s nothing to scroll, giving a cleaner default appearance.