CSS overflow-y property

Definition and Usage

The overflow-y property specifies whether to clip the top/bottom edges of the content - if the content overflows the element's content area.

Tip:Usage overflow-x property to determine the clipping of the left/right edges.

CSS Tutorial:CSS Overflow

HTML DOM Reference Manual:overflowY Property

Example

Clip the left/right edges of the content within div elements - if the content overflows the element's content area:

div
{
overflow-y: hidden;
}

Try it yourself

CSS Syntax

overflow-y: visible|hidden|scroll|auto|no-display|no-content;

Property Value

Value Description Test
visible Do not clip content, it may be displayed outside the content box. Test
hidden Clip content - Do not provide a scrolling mechanism. Test
scroll Clip content - Provide a scrolling mechanism. Test
auto If there is overflow in the box, a scrolling mechanism should be provided. Test
no-display If the content does not fit the content box, the entire box is deleted. Test
no-content If the content does not fit the content box, the entire content is hidden. Test

Technical Details

Default Value: visible
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.overflowY="scroll"

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Numbers with -ms- prefix indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
4.0 9.0
8.0 -ms-		 1.5 3.0 9.5