CSS <overflow> Data Type

The CSS <overflow> data type represents how content that extends beyond an element's box is handled. It uses the keyword values visible, hidden, clip, scroll, and auto.

Syntax

The <overflow> data type accepts one of five keyword values:

<overflow> = visible | hidden | clip | scroll | auto

Overflow Values

Value	Description
`visible`	Overflowing content is not clipped and may be displayed outside the element's box.
`hidden`	Overflowing content is clipped, and scrollbars are not displayed. The content can still be scrolled programmatically.
`clip`	Overflowing content is clipped at the overflow clip edge, and scrolling is not provided.
`scroll`	Overflowing content is clipped and can be viewed by scrolling. Scrollbars or another scrolling mechanism are provided as appropriate.
`auto`	The browser determines the scrolling behavior and generally provides a scrolling mechanism when content overflows.

visible

The visible value allows content to extend beyond the element's box without clipping it. It is the initial value for the overflow-x and overflow-y properties.

.example {
  overflow: visible;
}

hidden and clip

Both hidden and clip prevent overflowing content from being visibly painted beyond the applicable clipping edge, but they differ in scrolling behavior.

With hidden, the element is a scroll container and its content can be scrolled programmatically even though scrollbars are not displayed. With clip, the element does not become a scroll container solely because of that value, and the clipped content cannot be scrolled into view through scrolling.

.hidden {
  overflow: hidden;
}
.clip {
  overflow: clip;
}

scroll and auto

The scroll and auto values create a scroll container. With scroll, the browser provides a scrolling mechanism whether or not the content currently overflows. With auto, a scrolling mechanism is generally provided only when necessary.

.scroll {
  overflow: scroll;
}
.auto {
  overflow: auto;
}

<overflow> Example

The following boxes demonstrate how different <overflow> values handle content that is larger than its container:

.visible {
  overflow: visible;
}
.hidden {
  overflow: hidden;
}
.auto {
  overflow: auto;
}

Browser Result

visible

This content is intentionally long enough to extend beyond the fixed height of this example box.

hidden

This content is intentionally long enough to extend beyond the fixed height of this example box.

auto

This content is intentionally long enough to extend beyond the fixed height of this example box.

The <overflow> data type is used by CSS properties that control overflow along one or both axes, including:

Specifications

The <overflow> data type is defined in the CSS Overflow Module Level 3 .

CSS <overflow> Data Type