CSS overflow-y Property
The overflow-y property specifies whether the content should be hidden, visible or scrolls vertically when the content overflows the element’s top and bottom edges. This property is one of the CSS3 properties.
The overflow-y property has four main values: visible, hidden, auto and scroll.
INFO
If the value of overflow-y is set to visible, the value of overflow-x, by default, will be set to visible. If the value of overflow-y is set to scroll, auto, or hidden, the value of overflow-x will be set to auto.
| Initial Value | visible |
|---|---|
| Applies to | Block-containers, flex containers and grid containers. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.overflowY = "auto"; |
INFO
The overflow-x property can be used to define clipping the right and left sides.
Syntax
CSS overflow-y
css
overflow-y: visible | hidden | scroll | auto | initial | inherit;Example of the overflow-y property:
CSS overflow-y code example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.scroll {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: scroll</h3>
<div class="scroll">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>Result
Example of the overflow-y property with the "visible" value:
CSS overflow-y visible example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.visible {
background-color: #8ebf42;
color: #666;
height: 40px;
width: 200px;
overflow-y: visible;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: visible</h3>
<div class="visible">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>Example of the overflow-y property with the "hidden" value:
CSS overflow-y hidden example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.hidden {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: hidden;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: hidden</h3>
<div class="hidden">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>Example of the overflow-y property with the "auto" value:
CSS overflow-y auto example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.auto {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: auto</h3>
<div class="auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>Example of the overflow-y property with all the values:
CSS overflow-y all values example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.scroll {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: scroll;
}
div.hidden {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: hidden;
}
div.auto {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: auto;
}
div.visible {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: visible;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>overflow-y: scroll</h3>
<div class="scroll">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
</div>
<h3>overflow-y: hidden</h3>
<div class="hidden">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<h3>overflow-y: auto</h3>
<div class="auto">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<h3>overflow-y: visible</h3>
<div class="visible">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| visible | The content is not clipped and renders outside the padding box's top and bottom edges. This is the default value of this property. | Play it » |
| hidden | The content is clipped to fit vertically in the padding box. No scrollbar is added. | Play it » |
| scroll | The content is clipped to fit vertically in the padding box. The scrollbar is added to see the rest of the content. | Play it » |
| auto | The content is clipped to fit vertically in the padding box. Depends on the browser. If content overflows, scrollbar is added. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |
Practice
What does the overflow-y property in CSS do?