Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
overflow-x

overflow-x

Specifies how overflowing content is displayed along the x-axis (horizontal direction).

Sample Code

style.css

/* visible: show horizontally overflowing content as-is (initial value) */
div.test { overflow-x: visible;}

/* hidden: hide horizontal overflow */
div.test2 { overflow-x: hidden;}

/* scroll: always show a horizontal scrollbar */
div.test3 { overflow-x: scroll;}

/* auto: show horizontal scrollbar only when content overflows */
div.test4 { overflow-x: auto;}

/* Horizontally scrollable table wrapper */
.table-wrapper { overflow-x: auto;}

/* Hide overflow for a slider / carousel */
.slider { overflow-x: hidden; white-space: nowrap;}

Available Values

Value	Description
visible	Content overflows and is displayed. This 'visible' is the initial value.
hidden	The overflowing part is not displayed.
scroll	The overflowing part becomes scrollable.
auto	Leaves the display of overflowing content to the browser. In most browsers, this behaves the same as 'scroll'.

Browser Display Result

<div style="overflow-x: visible; white-space: nowrap; border: solid 1px red; width: 200px; height: 100px;">This is a div element with a width of 200px and height of 100px (red border).</div>

lt;div style="overflow-x: hidden; white-space: nowrap; border: solid 1px red; width: 200px; height: 100px;">This is a div element with a width of 200px and height of 100px (red border).</div>

<div style="overflow-x: scroll; white-space: nowrap; border: solid 1px red; width: 200px; height: 100px;">This is a div element with a width of 200px and height of 100px (red border).</div>

<div style="overflow-x: auto; white-space: nowrap; border: solid 1px red; width: 200px; height: 100px;">This is a div element with a width of 200px and height of 100px (red border).</div>

Details

Specifies how overflowing content is displayed along the x-axis (horizontal direction).

In most browsers, there is no visual difference between specifying 'auto' and 'scroll'.

The 'overflow-x' property was originally added as an IE-proprietary property, but it can now be used in virtually all browsers. However, since it originated as an IE-specific feature, thorough cross-browser testing is recommended.