CSS Overflow

The CSS overflow property controls what happens when content is too large to fit within an element's box.

Content can sometimes extend beyond the width or height available to an element. CSS can allow that content to remain visible, hide it, clip it, or provide a scrolling mechanism so the additional content can still be reached.

How Overflow Works

Overflow occurs when content requires more space than an element's box provides. This commonly happens when an element has a restricted width or height.

.box {
  width: 300px;
  height: 100px;
}

If the content requires more than 100px of height, it extends beyond the content area. The overflow property determines how that extra content is handled.

.box {
  width: 300px;
  height: 100px;
  overflow: auto;
}

overflow: visible

The initial value of overflow is visible. Overflowing content is not clipped and can be displayed outside the element's box.

.box {
  height: 100px;
  overflow: visible;
}

The element itself keeps its specified height, but overflowing content can extend beyond its edges. The overflow does not cause the element's box to become taller.

overflow: hidden

The hidden value clips content that extends beyond the element's padding box and does not provide visible scrollbars for accessing the clipped content.

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

Content outside the visible area is hidden from view. Because this can make content unavailable to the user, overflow: hidden should not be used when important content needs to remain accessible.

overflow: clip

The clip value clips overflowing content and does not create a scrolling mechanism.

.box {
  height: 100px;
  overflow: clip;
}

Although clip and hidden can look similar, they are not identical. An element using overflow: hidden remains a scroll container and can potentially be scrolled programmatically, while overflow: clip does not create a scroll container.

overflow: scroll

The scroll value clips overflowing content and provides a scrolling mechanism so the additional content can be reached.

.box {
  height: 100px;
  overflow: scroll;
}

Scrollbars or another scrolling mechanism can be provided even when the content does not overflow. The exact appearance depends on the browser, operating system, and device.

overflow: auto

The auto value allows the browser to provide scrolling when the content needs more space than the element provides.

.box {
  max-height: 200px;
  overflow: auto;
}

If the content fits, a scrolling mechanism is not normally needed. If the content overflows, the user can scroll to reach the additional content.

This makes auto useful for areas that should remain within a maximum size while still allowing access to all of their content.

Horizontal and Vertical Overflow

The overflow-x and overflow-y properties provide separate control over overflow in the horizontal and vertical directions.

.box {
  overflow-x: auto;
  overflow-y: hidden;
}

overflow-x controls overflow along the horizontal axis, while overflow-y controls overflow along the vertical axis.

The overflow shorthand can also accept two values. The first controls horizontal overflow and the second controls vertical overflow.

.box {
  overflow: auto hidden;
}

This is equivalent to using overflow-x: auto and overflow-y: hidden.

When Overflow Occurs

Overflow can occur for several reasons, including content that is larger than a fixed-size box, long unbroken text, large images, tables, or minimum sizing constraints.

.box {
  width: 250px;
  height: 120px;
}

Whenever possible, allowing a box to grow naturally with its content can avoid unnecessary overflow. When the design requires a size limit, the appropriate overflow behavior can keep the layout usable.

Overflow is especially important when fixed heights are used because text size, translated content, and user settings can change how much space the content requires.

Overflow Example

The following example limits the height of a box and uses overflow: auto to keep additional content accessible.

.box {
  height: 120px;
  overflow: auto;
}

Open the example in the editor and change auto to visible, hidden, clip, or scroll. Run the example after each change to compare how the browser handles the same overflowing content.

Play in Editor