Overflow properties (overflow-x, overflow-y)

The overflow-x and overflow-y properties are CSS level 3 extension of already defined property in CSS level 2.

Overflow-x

The overflow-x property specifies how to treat content's right and left edges in case of overflowing.

Syntax:

selector {

}

Values:

The overflow-x property may take one of following three values:

visible; The content will not be clipped, but rather will be rendered outside the container. This is the default value.
hidden; The content will be clipped and left without any scroll bars.
scroll; The content will be clipped and scrolling will be provided always.
auto; Left for browser to decide, but in most cases in case the scrolling mechanism will appear in case of overflowing. Otherwise it will stay hidden.
initial, inherit

Overflow-y

The overflow-y property specifies how to treat content's top and bottom edges in case of overflowing.

Syntax:

selector {

}

Values:

The overflow-x property may take one of following three values:

visible; The content will not be clipped, but rather will be rendered outside the container. This is the default value.
hidden; The content will be clipped and left without any scroll bars.
scroll; The content will be clipped and scrolling will be provided always.
auto; Left for browser to decide, but in most cases in case the scrolling mechanism will appear in case of overflowing. Otherwise it will stay hidden.
initial, inherit

Example

Overflow-x and overflow-y properties example:

<!DOCTYPE html>
<html>
<head><style type="text/css">
#ovx1 { overflow-x: scroll; }
#ovx2 { overflow-x: visible; }
#ovx3 { overflow-x: hidden; }
#ovy1 { overflow-y: scroll; }
#ovy2 { overflow-y: visible; }
#ovy3 { overflow-y: hidden; }
div {
	padding:2px 3px; margin:12px 2px; width:200px; height:50px;
	background:#e2d5a7; color:#222; box-shadow:2px 2px 6px #ddd;
	font-size:smaller;
}
</style></head>
    
<body>

<div id='ovx1'><strong>overflow-x:scroll</strong>
	<br />The overflow-x and overflow-y properties are CSS level 3 extension of already defined ...</div>
<div id='ovx2'><strong>overflow-x:visible</strong>
	<br />The overflow-x and overflow-y properties are CSS level 3 extension of already defined ...</div>
<div id='ovx3'><strong>overflow-x:hidden</strong>
	<br />The overflow-x and overflow-y properties are CSS level 3 extension of already defined ...</div>
<div id='ovy1'><strong>overflow-y:scroll</strong>
	<br />The overflow-x and overflow-y properties are CSS level 3 extension of already defined ...</div>
<div id='ovy2'><strong>overflow-y:visible</strong>
	<br />The overflow-x and overflow-y properties are CSS level 3 extension of already defined ...</div>
<div id='ovy3'><strong>overflow-y:hidden</strong>
	<br />The overflow-x and overflow-y properties are CSS level 3 extension of already defined ...</div>

</body>
</html>

›› go to examples ››

Overflow properties (overflow-x, overflow-y)

Overflow-x

Syntax:

Values:

The overflow-x property may take one of following three values:

Overflow-y

Syntax:

Values:

The overflow-x property may take one of following three values:

Example

Overflow-x and overflow-y properties example:

Comments

About

Contact

Get Connected