CSS Overflow

The overflow property controls what happens when content is larger than its container’s box. Use it to clip, scroll, or reveal overflow along the x/y axes.

1) overflow: visible, hidden, scroll, auto


.ov-visible { overflow: visible; } /* default */
.ov-hidden  { overflow: hidden; }
.ov-scroll  { overflow: scroll; } /* always shows scrollbars */
.ov-auto    { overflow: auto; }   /* only when needed */

visible

Content can overflow and paint outside the box without scrollbars. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula ornare arcu, sed…

hidden

Clipped content. No scrollbars shown even if text is longer than the box.

scroll

Always shows scrollbars. Useful when preserving layout even without overflow.

More lines… More lines… More lines…

auto

Shows scrollbars only when needed. Generally the best default.

More lines… More lines… More lines…

2) Axis Control: overflow-x & overflow-y


.xy      { overflow: auto; }   /* both axes */
.only-x { overflow-x: auto; overflow-y: hidden; }
.only-y { overflow-y: scroll; overflow-x: hidden; }
Drag scroll (x & y)

3) Text Overflow: Ellipsis


/* Single line */
.ellipsis-1{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line (line clamp) */
.ellipsis-3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Single line

Very long title that will be truncated with an ellipsis at the end to keep the UI clean

Multi-line (3 lines)

Multi-line clamping keeps the first few lines of content and hides the rest with a tidy cut-off. Works in all Chromium browsers and Safari using -webkit-line-clamp; Firefox support is evolving.

Tip: Combine with a “Read more” link if content is important.

4) Scroll Snapping (Horizontal Cards)


.snap-x      { scroll-snap-type: x mandatory; overflow-x: auto; }
.snap-card   { scroll-snap-align: start; }
Card 1

Snap to me while scrolling →

Card 2

Snap to me while scrolling →

Card 3

Snap to me while scrolling →

Card 4

Snap to me while scrolling →

Card 5

Snap to me while scrolling →

Card 6

Snap to me while scrolling →

5) Custom Scrollbar (Basic)


.scrollbar-demo { scrollbar-color: #c5e1fa #f2f6fb; scrollbar-width: thin; } /* Firefox */

/* WebKit browsers */
.scrollbar-demo::-webkit-scrollbar        { width: 10px; }
.scrollbar-demo::-webkit-scrollbar-thumb  { background: #c5e1fa; border-radius: 8px; }
.scrollbar-demo::-webkit-scrollbar-track  { background: #f2f6fb; }

Scrollable line 1 — customize the thumb & track for brand fit.

Scrollable line 2 — customize the thumb & track for brand fit.

Scrollable line 3 — customize the thumb & track for brand fit.

Scrollable line 4 — customize the thumb & track for brand fit.

Scrollable line 5 — customize the thumb & track for brand fit.

Scrollable line 6 — customize the thumb & track for brand fit.

Scrollable line 7 — customize the thumb & track for brand fit.

Scrollable line 8 — customize the thumb & track for brand fit.

Scrollable line 9 — customize the thumb & track for brand fit.

Scrollable line 10 — customize the thumb & track for brand fit.

Scrollable line 11 — customize the thumb & track for brand fit.

Scrollable line 12 — customize the thumb & track for brand fit.

Scrollable line 13 — customize the thumb & track for brand fit.

Scrollable line 14 — customize the thumb & track for brand fit.

Note: Scrollbar styling varies across browsers; test on your targets.

Quick Notes:

  • overflow: auto is a good default for scrollable regions.
  • Use text-overflow: ellipsis + white-space:nowrap for single-line truncation.
  • Multi-line clipping relies on -webkit-line-clamp today; provide graceful fallbacks.
  • Scroll snapping improves UX for carousels and galleries; avoid over-snapping long documents.