Tutorials
CSS
Overflow Property

Overflow Property

The overflow property controls what happens when content is too big for its container. It’s essential for creating scrollable areas and managing content flow.

What is Overflow?

Overflow occurs when content doesn’t fit within its container’s boundaries. The overflow property tells the browser how to handle this.

.container {
  width: 200px;
  height: 100px;
  overflow: hidden; /* Content that doesn't fit is hidden */
}

Overflow Values

visible (default)

Content is not clipped and may extend outside the container.

.visible-overflow {
  overflow: visible; /* Content shows outside the box */
}

hidden

Content is clipped and hidden.

.hidden-overflow {
  overflow: hidden; /* Content is cut off */
}

scroll

Content is clipped but scrollbars are always shown.

.scroll-overflow {
  overflow: scroll; /* Always shows scrollbars */
}

auto

Scrollbars appear only when needed.

.auto-overflow {
  overflow: auto; /* Shows scrollbars when content overflows */
}

Overflow-x and Overflow-y

Control horizontal and vertical overflow separately.

.horizontal-scroll {
  overflow-x: auto; /* Scroll horizontally if needed */
  overflow-y: hidden; /* Never scroll vertically */
}

.vertical-scroll {
  overflow-x: hidden; /* Never scroll horizontally */
  overflow-y: auto; /* Scroll vertically if needed */
}

Practical Examples

Scrollable Container

Create a fixed-height container with scrollable content.

.article-content {
  height: 400px;
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid #ddd;
}

Image Gallery

Make images fit within their containers.

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: auto;
}

Chat Window

Create a scrollable chat interface.

.chat-window {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 1rem;
}

.message {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 4px;
}

Horizontal Scrolling Menu

Create a horizontal scrolling navigation.

.nav-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.5rem;
}

.nav-item {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-right: 0.5rem;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

Text Overflow

Handle long text that doesn’t fit.

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Shows "..." for cut-off text */
}

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

Scrollbar Styling

Customize the appearance of scrollbars (Webkit browsers).

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

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

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

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

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

Handling Overflow in Flexbox

Overflow behavior with flex items.

.flex-container {
  display: flex;
  height: 200px;
  overflow: auto; /* Container scrolls */
}

.flex-item {
  flex-shrink: 0; /* Items don't shrink */
  width: 150px;
  height: 100px;
  margin: 0.5rem;
}

Common Issues

Content Not Scrolling

Make sure the container has a fixed height.

/* This won't scroll */
.no-height {
  overflow: auto;
  /* No height set */
}

/* This will scroll */
.fixed-height {
  height: 200px;
  overflow: auto;
}

Hidden Content

Use overflow: visible carefully as it can break layouts.

/* May cause layout issues */
.problematic {
  overflow: visible;
  position: absolute;
}

Mobile Considerations

Touch devices handle scrolling differently.

/* Better for mobile */
.touch-scroll {
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  overflow-y: auto;
}

Best Practices

  1. Set explicit heights for scrollable containers
  2. Use overflow: auto for most cases
  3. Test scrolling on touch devices
  4. Consider accessibility when hiding content
  5. Use text-overflow for single-line truncation

Performance Considerations

  • Avoid overflow: scroll on elements that don’t need it
  • Use will-change property for animated scrollable content
  • Consider using transform for scroll-based animations

Browser Support

Overflow properties are well supported:

  • Chrome: Full support
  • Firefox: Full support
  • Safari: Full support
  • Edge: Full support

Custom scrollbar styling is Webkit-only.

External Resources:

Related Tutorials:

Last updated on
Z-index and Stacking ContextDisplay Property