CSS overflow-y Property

Clip the top/bottom edges of the content inside the <div> element – if it overflows the element’s content area:

div {
overflow-y: hidden;
}

Try it Yourself »


Definition and Usage

The overflow-y property specifies what to do with the top/bottom edges of the content – if it overflows the element’s content area.

Tip: Use the overflow-x property to determine clipping at the left and right edges.

Default value: visible
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.overflowY=”scroll”Try it

CSS Syntax

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

Property Values

Value Description
visible Default value. The content is not clipped, and it may be rendered outside the content box
hidden The content is clipped – and no scrolling mechanism is provided
scroll The content is clipped and a scrolling mechanism is provided
auto Should cause a scrolling mechanism to be provided for overflowing boxes
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit