Overflow
How an element handles content that is too large to fit inside it.
Plain English
Overflow controls what happens when text or images are bigger than their container. Left unchecked, content spills outside its box and breaks the layout. The overflow property lets you hide the spillage, add a scrollbar, or let it flow freely depending on your design needs. It is especially important for truncating long text in cards.
Technical
The overflow CSS property (with longhand overflow-x and overflow-y) accepts: visible (default — content paints outside), hidden (clips at border), scroll (always shows scrollbar), auto (scrollbar only when needed), and clip (like hidden but no scrollable context). overflow: hidden on a parent also creates a new block formatting context and is commonly used to contain floats and clip child border-radius.
Live Demo
Visible — spills out
overflow: visible
This text is intentionally long to demonstrate overflow behaviour. It keeps going and going so we can see exactly what happens at the container boundary when different overflow values are applied.
Hidden — clipped
overflow: hidden
This text is intentionally long to demonstrate overflow behaviour. It keeps going and going so we can see exactly what happens at the container boundary when different overflow values are applied.
Auto — scrollable
overflow: auto
This text is intentionally long to demonstrate overflow behaviour. It keeps going and going so we can see exactly what happens at the container boundary when different overflow values are applied.
Choose overflow based on whether content should spill, be hidden, or remain accessible.
Usage
✓ Good usage
Apply overflow: hidden to a card container with border-radius: 12px to ensure child images are clipped to the rounded corners.
✗ Bad usage
Setting overflow: hidden on the body element to hide a layout bug — this masks the real problem and prevents intentional scroll.
Recommended values
- overflow: hidden — clip images/content to rounded corners (used with border-radius)
- overflow: auto — add scrollbar to a data table or code block only when needed
- overflow: hidden + text-overflow: ellipsis + white-space: nowrap — truncate single-line text in cards
- overflow-x: hidden on body — prevent horizontal scrollbar from layout overflow bugs
Common mistakes
- Using overflow: hidden on body to suppress a horizontal scroll caused by an element wider than the viewport — fix the element instead.
- Forgetting that overflow: hidden creates a new stacking context, which can clip absolutely-positioned tooltips or dropdowns.
- Using overflow: scroll instead of auto — always shows a scrollbar track even when content fits.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Apply overflow: hidden to the card to clip the image to its border radius. Use overflow: hidden + text-overflow: ellipsis + white-space: nowrap to truncate the card title to one line.