CSS overflow-x Property

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

In other words, this property allows us to display content that is horizontally overflowing from the page. The overflow-x property's default value is visible. This CSS property cannot be animated.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
    div{
        background-color: lightgreen;
        width: 50px;
    }
    .ex1 {
        overflow-x: scroll;
    }
    .ex2 {
        overflow-x: hidden;
    }
    .ex3 {
        overflow-x: auto;
    }
    .ex4 {
        overflow-x: visible;
    }
</style>
</head>
<body>

<h2>overflow-x: scroll</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</div>

<h2>overflow-x: hidden</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit..</div>

<h2>overflow-x: auto</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</div>

<h2>overflow-x: visible (default)</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</div>

</body>
</html>

Preview

Property Values

Value	Description
visible	The content is not clipped and may extend beyond the left and right edges. This is the default setting.
hidden	The content is clipped, and there is no scrolling mechanism.
scroll	The content has been clipped, and a scrolling mechanism has been provided.
auto	Should result in the provision of a scrolling mechanism for overflowing boxes.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

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

overflow-wrap

overflow-y

CSS overflow-x Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us