CSS Overflow — hidden, auto, scroll and the Bugs They Cause

Overflow decides what happens when content is bigger than its box — and causes two of CSS's most-googled bugs.

The values

overflow: visible;   /* default — spills out */
overflow: hidden;    /* clipped, no scrollbar */
overflow: auto;      /* scrollbar only when needed — the usual pick */
overflow: clip;      /* like hidden but faster, no scroll possible */
overflow-x: auto;    /* per-axis (tables on mobile) */

Truncation recipes

/* one line with … */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* three lines with … */
.clamp { display: -webkit-box; -webkit-line-clamp: 3;
         -webkit-box-orient: vertical; overflow: hidden; }

Bug 1: mystery horizontal page scroll

Something is wider than the viewport. Find it fast: document.querySelectorAll("*").forEach(el => { if (el.scrollWidth > document.documentElement.clientWidth) console.log(el) }) in the console. Usual suspects: 100vw + padding, unwrapped long URLs, negative margins.

Bug 2: sticky stopped working

ANY ancestor with overflow hidden/auto/scroll kills position: sticky inside it — the #1 sticky mystery (details in the sticky guide).