CSS overflow-x Property

Show different overflow-x property values:

div.ex1 {
overflow-x: scroll;
}div.ex2 {
overflow-x: hidden;
}div.ex3 {
overflow-x: auto;

div.ex4 {
overflow-x: visible;


Try it Yourself »

Definition and Usage

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

Tip: Use the overflow-y property to determine clipping at the top and bottom edges.

Default value: visible
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.overflowX=”scroll”Try it

CSS Syntax

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

Property Values

Value Description
visible The content is not clipped, and it may be rendered outside the left and right edges
hidden The content is clipped – and no scrolling mechanism is provided
scroll The content is clipped and a scrolling mechanism is provided
auto Should cause a scrolling mechanism to be provided for overflowing boxes
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit