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โ |