CSS overflow Property

The overflow property is specified as one or two keywords from the list below. If you specify two keywords, the first applies to overflow-x and the second to overflow-y. Otherwise, overflow-x and overflow-y have the same value. This is in charge of the main content. It indicates whether the content should be clipped or scroll bars should be added.

Syntax

overflow: visible | hidden | clip | scroll | auto | initial | inherit;

Example

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

<h2>overflow: scroll</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: hidden</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: auto</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: clip</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: visible</h2>
<div class="ex5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

</body>
</html>

Preview

Property Values

Value	Description
visible	The overflow has not been clipped. It renders outside the box of the element. This is the default setting.
hidden	The overflow has been clipped, and the rest of the content will be hidden. Programmatically scrolling content is possible (for example, by setting scrollLeft() or scrollTo().
clip	The overflow has been clipped, and the rest of the content will be hidden. Scrolling is prohibited, including programmatic scrolling.
scroll	The overflow is clipped, but a scroll bar is added to allow access to the remaining content.
auto	If the overflow is clipped, a scroll bar should be added to allow the user to see the rest of the content.
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	1.0	1.0	1.0	4.0	7.0

outline-width

overflow-wrap

CSS overflow Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us