CSS — Overflow

When content outgrows its box

Fix a small height on a box with lots of text and something must give:

.box {
    width: 300px;
    height: 100px;
    border: 1px solid #ccc;
}

The overflow property decides what gives:

Value	Behavior
visible	Content spills outside the box (default)
hidden	Excess is clipped away, unreachable
scroll	Scrollbars always shown
auto	Scrollbars appear only when needed

.clip  { overflow: hidden; }
.scrolly { overflow: scroll; }
.smart { overflow: auto; }

What auto looks like

(Same fixed-height box; a vertical scrollbar appears only because the text is long. Shorter boxes show none.)

auto is almost always what you want when scrolling is intended; visible spillover is usually an accident you're debugging.

Per-axis control

Modern layouts often want horizontal scrolling only — carousels, code blocks, data tables:

.carousel {
    overflow-x: auto;     /* sideways scrollbar as needed */
    overflow-y: hidden;   /* never vertically             */
    white-space: nowrap;  /* keep items on one line       */
}

Classic table fix for phones:

.table-wrap {
    overflow-x: auto;    /* wide tables swipe sideways instead of breaking layout */
}

The hidden dangers of hidden

Two non-obvious side effects worth knowing:

1. It becomes a scroll container anyway — programmatic scrolling still works inside (el.scrollTop = 999). Occasionally exploited; often confusing.

2. It clips absolutely-positioned children — your pretty corner badge vanishes if it pokes past a parent with overflow: hidden.

Single-line text truncation

The job-interview favorite:

.title {
    white-space: nowrap;      /* refuse to wrap            */
    overflow: hidden;         /* clip the excess           */
    text-overflow: ellipsis;  /* …instead of mid-letter cut */
}

What the browser displays

(Long titles end cleanly with "…" exactly at the box edge, whatever the screen size.)

Multi-line ellipsis needs the webkit pair:

.snippet {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Three lines, then "…". Supported everywhere that matters today.

Overflow in the wild

• Chat panels: fixed height + overflow-y: auto
• Code snippets on docs sites: overflow-x: auto
• Sticky headers over scrolling lists: inner container scrolls, page doesn't
• Modals: lock body scroll by toggling body { overflow: hidden }

Mini Practice

1. Build four identical boxes demoing all four values side by side
2. Make a horizontal card carousel with overflow-x: auto
3. Apply single-line ellipsis to product names of varying length
4. Clamp a paragraph to three lines; resize and watch it adapt
5. Wrap a wide table in .table-wrap and test on phone width

Next: flexbox →