CSS overflow-y Property

CSS's overflow-y property specifies how content behaves when it overflows the top and bottom edges of a block-level element. Depending on the value of the overflow-y property, the content may be clipped, hidden, or a scrollbar displayed.

Syntax

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

Example

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

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

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

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

<h2>overflow-y: 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 appear outside of the content box. 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	For overflowing boxes, a scrolling mechanism should be provided.
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-y	4.0	1.5	3.0	9.0 8.0 -ms-	9.5

overflow-x

padding

CSS overflow-y Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us