CSS overflow-x Property


The overflow-x property in CSS specifies whether to add a scroll bar, clip the content or display overflow content of a block-level element, when it overflows at the left and right edges.

In other words, this property helps us to display the content which is overflowing from the page horizontally.

CSS overflow-x property values are

  • visible
  • hidden
  • scroll
  • auto

The overflow-x property is used to specify whether the content of an element should be visible, clipped (hidden), or whether or not to add horizontal scroll bars when the content overflows the element’s left and right edges.

The content overflows an element horizontally when the element has a specified width, and it contains content inside it that has a width that is larger than the width of the element itself.

The overflow-x property can be used to show the overflow content on the left and right edge, clip it (hide any excess content that’s outside the element’s boundaries), or add horizontal scroll bars to the element so that the overflow content can be seen on scroll.

CSS Syntax

overflow-x: visible|hidden|scroll|auto|initial|inherit;

Supported Browsers: The browser supported by property are listed below:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example -