CSS overflow-x Property

CSS overflow-x property is used in situations when the total width of the inner content of an element is more than the element’s width itself. How that overflowing content should be displayed is decided by the overflow-x property.

For example, let’s say we have a <div> element that has a total width of 300px and it contains an image having a total width of 400px. Some part(100px) of that image will flow out of its containing <div> because it’s 100px wider than its containing <div>. Now, how that overflowing content/part should be displayed is decided by the overflow-x property.

We can either hide or show that overflowing content or can add a horizontal scroll bar to the containing <div> using the overflow-x property. See the example below:

Example:

.div1{
  overflow-x: visible;
}
.div2{
  overflow-x: hidden;
}
.div3{
  overflow-x: scroll;
}
.div4{
  overflow-x: auto;
}

It is recommended to use overflow-x: auto; instead of using overflow-x: scroll;. Because overflow-x: auto; adds a horizontal scroll bar only if it’s required. While overflow-x: scroll; adds a horizontal scroll bar even if it is not required. See the example below:

Example:

.div1{
  overflow-x: scroll;
}
.div2{
  overflow-x: auto;
}

---

CSS Syntax

The overflow-x property has the following syntax:

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

Property Values

The overflow-x property accepts the following values:

visible	The overflowing content is not clipped. It is displayed normally. This is the default value.
hidden	The overflowing content is clipped completely.
scroll	The overflowing content is forced to display inside the containing element’s boundary by adding a horizontal scroll bar to it. It adds a horizontal scroll bar even if it’s not required.
auto	The overflowing content is forced to display inside the containing element’s boundary by adding a horizontal scroll bar to it. It adds a horizontal scroll bar only if it’s required.
initial	Sets the overflow-x property to its default value(visible).
inherit	Inherits the overflow-x property from the parent element.

General Info

Default Value	visible
Inherited	No
JavaScript Usage	element.style.overflowX = “auto”