CSS Overflow Property

The overflow property controls what happens when content is too large for its container.

Overflow Values

visible (default): Content overflows and is not clipped.

hidden: Overflow is clipped and invisible.

scroll: Adds scrollbars (always visible).

auto: Adds scrollbars only when needed.

overflow-x and overflow-y control horizontal and vertical separately.

/* Hidden overflow */
.clipped {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

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

/* Horizontal only */
.horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

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