CSS Overflow: Theory & Interactive Examples

Theory & Explanation

The overflow property in CSS controls what happens when content overflows the bounds of its container. It is essential for managing scrollbars, hiding excess content, and creating scrollable areas. The main values are:

visible (default): Content is not clipped and may overflow outside the box.
hidden: Content is clipped and the rest is invisible (no scrollbars).
scroll: Content is clipped, but scrollbars are always shown (even if not needed).
auto: Content is clipped, and scrollbars appear only when needed.

When to Use overflow

To create scrollable containers or cards.
To hide overflowing content for clean layouts.
To prevent layout breaking from long words or images.
To enable horizontal or vertical scrolling (with overflow-x and overflow-y).

Best Practices

Use overflow: auto for scrollbars only when needed.
Use overflow: hidden to crop content, but ensure important info isn't lost.
Combine with max-width or max-height for responsive layouts.
Test on different devices and browsers for consistent scrollbar behavior.

Code Examples

/* Basic overflow */
.overflow-visible { overflow: visible; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-auto { overflow: auto; }

/* Overflow X/Y */
.overflow-x-scroll { overflow-x: scroll; }
.overflow-y-auto { overflow-y: auto; }

Interactive Demos

overflow: visible (default)

This content overflows the box and is still visible outside the border. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur.

Content spills out of the box.

overflow: hidden

This content is clipped and anything outside the box is hidden. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur.

Overflowing content is not visible.

overflow: scroll

This content is clipped, but scrollbars are always visible. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur.

Scrollbars are always shown, even if not needed.

overflow: auto

This content is clipped, and scrollbars appear only when needed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur.

Scrollbars appear only if content overflows.

Try resizing your browser or adding more content to see how each overflow value behaves.

CSS overflow

Theory & Explanation

When to Use overflow

Best Practices

Code Examples

Interactive Demos

CSS `overflow`