overflow-x

Controls what happens to content that is wider than its container. It can be hidden, clipped, or made to scroll horizontally.

Quick example

.image-gallery {
  /* Allows users to scroll horizontally through a row of images */
  overflow-x: scroll;
  white-space: nowrap;
}

Quick facts

Initial value
visible
Inherited
No
Applies to
block, flex, and grid containers
Animation type
discrete

Values

visiblehiddenclipscrollauto

overflow-x Browser Support

Widely available Since 2020 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.

Safe to use without fallbacks.

1+
3.5+
3+
12+
ESC