overflow controls what happens when content does not fit inside a box. It is one of the most important properties for responsive design because small screens, long words, tables, images, code blocks, and popups can all overflow their containers.
The key is choosing whether extra content should remain visible, be clipped, or become scrollable. A page with accidental horizontal scrolling often has one element whose overflow is unmanaged, such as a wide table, long URL, fixed-width image, or input row.
CSS Overflow needs more than a syntax memory trick. The important idea is to understand visible, hidden, scroll, auto, clipping, scroll containers, and overflow behavior in fixed-size layouts in the exact situation where the page topic appears, then prove the behavior with a small working example and one edge case.
The overflow property controls what happens when content is too large to fit in its container. It applies to block-level elements with a defined height.
For vertical content, overflow-y: auto is usually safer than scroll because it shows a scrollbar only when needed. For wide content like tables and code, wrapping the content in a horizontal scroll container is better than forcing the whole page to become wider.
| Value | Behavior |
|---|---|
| visible | Default - content overflows outside the box, no clipping |
| hidden | Content is clipped, no scrollbar shown |
| scroll | Always shows scrollbars (even if not needed) |
| auto | Shows scrollbars only when content overflows (recommended) |
| clip | Like hidden but disables programmatic scrolling |
/* Scrollable container */
.scroll-box {
height: 200px;
overflow: auto; /* scrollbar only when needed */
border: 1px solid #dee2e6;
padding: 16px;
}
/* Horizontal scroll only */
.code-block {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap; /* prevent line wrapping */
}
/* Hide overflow - clip content */
.card-image {
overflow: hidden;
border-radius: 8px;
}
.card-image img {
width: 100%;
transition: transform 0.3s;
}
.card-image:hover img {
transform: scale(1.05); /* zoom effect, clipped by overflow:hidden */
}
/* Responsive table */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}
/* Clearfix using overflow */
.clearfix { overflow: auto; } /* contains floated children */
/* Sticky scroll container */
.sticky-container {
height: 400px;
overflow-y: scroll;
scroll-behavior: smooth; /* smooth scrolling */
}
/* Custom scrollbar (WebKit) */
.custom-scroll::-webkit-scrollbar { width: 8px; }
.custom-scroll::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scroll::-webkit-scrollbar-thumb {
background: #3498db;
border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #2980b9; }Text overflow needs different tools depending on the problem. Use text-overflow: ellipsis for one-line labels, line clamping for short previews, and overflow-wrap for long unbroken strings such as emails, URLs, tokens, or file paths.
/* Single-line truncation with ellipsis */
.truncate {
white-space: nowrap; /* prevent wrapping */
overflow: hidden; /* clip overflow */
text-overflow: ellipsis; /* show ... at end */
max-width: 200px;
}
/* Multi-line truncation (WebKit) */
.clamp-3-lines {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* overflow-wrap - break long words */
.long-word {
overflow-wrap: break-word; /* break word if too long */
word-break: break-word; /* older equivalent */
}
/* word-break */
.break-all { word-break: break-all; } /* break anywhere */
.keep-all { word-break: keep-all; } /* no breaks (CJK text) }
/* hyphens - add hyphens when breaking */
.hyphenate {
hyphens: auto;
overflow-wrap: break-word;
lang: en; /* needs lang attribute on HTML element */
}When a mobile page has a sideways scrollbar, inspect the widest element first. Common causes include width: 100vw on a page with a scrollbar, fixed pixel widths, images without max-width, long words, and tables without a scroll wrapper.
img,
video,
iframe {
max-width: 100%;
height: auto;
}
.table-scroll {
overflow-x: auto;
}
.table-scroll table {
min-width: 640px;
}
.breakable-value {
overflow-wrap: anywhere;
}Overflow happens when content is larger than the box that contains it. CSS lets you decide whether that extra content remains visible, is clipped, or becomes scrollable. This matters for cards, code blocks, sidebars, modals, tables, and mobile layouts.
The important detail is that overflow only becomes visible as a problem when dimensions or layout constraints exist. A box with no height limit may simply grow. A box with max-height and overflow-y: auto becomes a scroll container. Horizontal overflow often comes from long words, tables, images, or nowrap text.
.notes-panel {
max-height: 320px;
overflow-y: auto;
overflow-x: hidden;
}
.notes-panel img {
max-width: 100%;
}Using overflow: hidden on body to remove a mobile horizontal scrollbar.
Find and fix the element that is wider than the viewport.
Adding text-overflow: ellipsis without white-space and overflow rules.
Use white-space: nowrap; overflow: hidden; text-overflow: ellipsis together.
Letting a wide table shrink until columns become unreadable.
Give the table a sensible min-width and place it inside an overflow-x wrapper.
Using overflow: hidden to hide a layout bug that users still need to read.
Choose clipping, wrapping, resizing, or scrolling based on the content purpose.
The element may not have a constrained width or height. Overflow only becomes visible when content exceeds a defined box.
Use auto in most cases because it shows scrollbars only when content actually overflows.
It clips content like hidden, but it does not create a scroll container for programmatic scrolling.
Use overflow-wrap: anywhere or overflow-wrap: break-word on the text container.
The content may not exceed the box height, or the element may not have a height or max-height constraint.
Explore 500+ free tutorials across 20+ languages and frameworks.