What is Overflow?

When content is larger than its container, it overflows. By default, this overflowing content is visible, spilling outside the element's boundaries. The overflow property gives you control over this behavior — you can hide the excess, add scrollbars, or let it spill naturally.

Understanding overflow is essential for building scrollable containers, preventing layout breaks, and creating certain visual effects.

The Default: visible

By default, overflow is set to visible, meaning content that doesn't fit simply extends beyond the container:

CSS

.box {
  width: 200px;
  height: 100px;
  overflow: visible; /* Default */
}

This can cause overlapping with adjacent elements and break your layout if not anticipated.

overflow: hidden

hidden clips any content that extends beyond the container's boundaries:

CSS

.box {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

When to Use hidden

CSS

/* Prevent horizontal scrollbar from long words */
.text-box {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Image containers with rounded corners */
.card-image {
  border-radius: 12px;
  overflow: hidden; /* Clips image to rounded corners */
}

/* Clearfix alternative for floats */
.clearfix {
  overflow: hidden;
}

The overflow: hidden Stacking Context

Setting overflow to anything other than visible creates a new stacking context. This can affect z-index behavior of child elements.

overflow: scroll

scroll always shows scrollbars, whether needed or not:

CSS

.scrollable {
  width: 300px;
  height: 200px;
  overflow: scroll;
}

Directional Scrolling

CSS

/* Only vertical scrollbar */
.vertical-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
}

/* Only horizontal scrollbar */
.horizontal-scroll {
  overflow-x: scroll;
  overflow-y: hidden;
}

overflow: auto

auto shows scrollbars only when content actually overflows — the most user-friendly option for scrollable areas:

CSS

.smart-scroll {
  max-height: 400px;
  overflow: auto;
}

The Preferred Pattern

CSS

/* Use auto, not scroll, for better UX */
.modal-content {
  max-height: 70vh;
  overflow-y: auto;
}

.sidebar-nav {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

overflow-x and overflow-y

Control horizontal and vertical overflow independently:

CSS

.code-block {
  overflow-x: auto;    /* Horizontal scroll if needed */
  overflow-y: visible; /* No vertical constraint */
  white-space: pre;    /* Preserve whitespace */
}

.chat-messages {
  overflow-x: hidden;  /* No horizontal scroll */
  overflow-y: auto;    /* Vertical scroll when needed */
}

overflow: clip

clip is similar to hidden but prevents all scrolling, even programmatic scrolling via JavaScript:

CSS

.no-scroll-ever {
  overflow: clip;
}

You can also use overflow-clip-margin to allow content to overflow by a specific amount before being clipped.

Text Overflow with Ellipsis

For truncating text with "...", combine overflow with text-overflow:

CSS

.truncate {
  white-space: nowrap;      /* Prevent text wrapping */
  overflow: hidden;         /* Hide overflow */
  text-overflow: ellipsis;  /* Show ... */
}

Multi-line Truncation

CSS

.multi-line-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;     /* Show 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Creating Scrollable Containers

Scrollable Card Content

CSS

.card {
  display: flex;
  flex-direction: column;
  height: 400px;
}

.card-header {
  flex-shrink: 0;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

.card-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.card-footer {
  flex-shrink: 0;
  padding: 1rem;
  border-top: 1px solid #eee;
}

Horizontal Scrolling Gallery

CSS

.gallery {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem;
  scroll-snap-type: x mandatory;
}

.gallery-item {
  flex: 0 0 280px;
  scroll-snap-align: start;
}

/* Hide scrollbar but keep functionality */
.gallery {
  scrollbar-width: none; /* Firefox */
}
.gallery::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

Styling Scrollbars

Custom Scrollbar (WebKit browsers)

CSS

.custom-scroll {
  overflow-y: auto;
}

.custom-scroll::-webkit-scrollbar {
  width: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Firefox Scrollbar Styling

CSS

.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

Smooth Scrolling

CSS

.smooth-scroll {
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Or apply globally */
html {
  scroll-behavior: smooth;
}

Scroll Padding for Fixed Headers

When you have a fixed header and use anchor links, content can get hidden behind the header. Use scroll-padding:

CSS

html {
  scroll-padding-top: 80px; /* Height of fixed header */
}

Common Overflow Problems and Solutions

Problem: Unwanted Horizontal Scrollbar

CSS

/* Usually caused by elements wider than viewport */
body {
  overflow-x: hidden; /* Quick fix, but find the real cause */
}

/* Better: find and fix the oversized element */
.problematic-element {
  max-width: 100%;
}

Problem: Scrollbar Causing Layout Shift

CSS

/* Reserve space for scrollbar to prevent shift */
html {
  overflow-y: scroll;
}

/* Or use modern scrollbar-gutter */
.container {
  scrollbar-gutter: stable;
}

Problem: Overflow Hidden Breaking Position Sticky

overflow: hidden on a parent prevents position: sticky from working on children. Restructure your HTML or use overflow: clip as an alternative in some cases.

Key Takeaways

Use overflow: auto for scrollable areas (not scroll)
Use overflow: hidden for visual clipping (rounded corners, clearfix)
Combine overflow: hidden, white-space: nowrap, and text-overflow: ellipsis for text truncation
Use scroll-padding when you have fixed headers
Remember that overflow values other than visible create a new stacking context

This knowledge builds directly on the Width & Height properties. Next, explore how CSS Flexbox gives you powerful tools for laying out elements within containers.