CSS overflow-x property

Definition and Usage

The overflow-x property specifies whether to clip the left/right edges of the content - if the content area of the element overflows.

Tip:Usage overflow-y use an attribute to determine the clipping on the top/bottom edges.

CSS Tutorial:CSS Overflow

HTML DOM Reference Manual:overflowX Property

Example

Clip the left/right edges of the content of the div element - if the content area of the element overflows:

div
{
overflow-x:hidden;
}

Try it yourself

CSS Syntax

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

Attribute Value

Value Description Tests
visible Do not clip content, it may be displayed outside the content box. Tests
hidden Clip content - Do not provide scrolling mechanism. Tests
scroll Clip content - Provide scrolling mechanism. Tests
auto If there is overflow in the box, a scrolling mechanism should be provided. Tests
no-display If the content does not fit in the content box, the entire box should be deleted. Tests
no-content If the content does not fit in the content box, the entire content should be hidden. Tests

Technical Details

Default Value: visible
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.overflowX="scroll"

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Numbers with -ms- prefix indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
4.0 9.0
8.0 -ms-		 3.5 3.0 9.5