CSS Overflow hidden, scroll, auto

The overflow Property

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.

Overflow creates clipping or scrolling when content exceeds a box. Diagnose intrinsic minimum sizes and scroll-container boundaries before hiding excess content.

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

overflow, overflow-x, overflow-y

/* 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

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.

text-overflow, overflow-wrap, word-break

/* 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 */
}

Debugging Horizontal Scroll

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.

Set img, video, and iframe to max-width: 100% when they must fit their container.
Wrap data tables in a div with overflow-x: auto.
Use overflow-wrap: anywhere for unpredictable long strings.
Avoid using overflow: hidden on the body as a permanent fix because it can hide real layout bugs.

Safe wrappers for wide content

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

.table-scroll {
    overflow-x: auto;
}

.table-scroll table {
    min-width: 640px;
}

.breakable-value {
    overflow-wrap: anywhere;
}

Controlling content that does not fit its box

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.

Use overflow-y: auto for scrollable panels.
Avoid hiding content unless clipping is intentional.
Set max-width on images and long media.
Check mobile widths for accidental horizontal scroll.

Scrollable notes panel without horizontal spill

.notes-panel {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

.notes-panel img {
    max-width: 100%;
}

Before you move on