overflow

The overflow property controls what happens when content overflows an element's box. You can hide overflow, show scrollbars, or let content overflow visibly. Understanding overflow is crucial for managing content and creating scrollable containers.

Overflow Values

Value	Behavior	Use Case
visible	Content overflows (default)	Most elements
hidden	Content is clipped	Hiding overflow
scroll	Always shows scrollbars	Scrollable areas
auto	Shows scrollbars only when needed	Content containers

CSS

/* Visible (default) */
.element {
  overflow: visible;
  /* Content can overflow */
}

/* Hidden */
.element {
  overflow: hidden;
  /* Content is clipped */
}

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

/* Auto */
.element {
  overflow: auto;
  /* Scrollbars only when needed */
}

/* Individual axes */
.element {
  overflow-x: hidden;
  overflow-y: auto;
}

Common Patterns

CSS

/* Scrollable container */
.scrollable {
  width: 300px;
  height: 200px;
  overflow: auto;
}

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

/* Scrollable code block */
pre {
  overflow-x: auto;
  background: #f5f5f5;
  padding: 10px;
}

/* Modal dialog with scrollable content */
.modal-content {
  max-height: 80vh;
  overflow-y: auto;
}

Note

Overflow controls content that exceeds container size. Use hidden for clipping, auto for conditional scrollbars, and scroll for always visible scrollbars.

Box sizing: [box-sizing](/css/box-sizing).