CSS overflow-y Property


The overflow-y property of CSS specifies the behavior of content when it overflows a block-level element’s top and bottom edges. The content may be clipped, hidden or a scrollbar may be displayed accordingly based on the value assigned to the overflow-y property.

The overflow-y property is used to specify whether the content of an element should be visible, clipped (hidden), or whether or not to add vertical scroll bars when the content overflows the element’s top and bottom edges.

The content overflows an element vertically when the element has a specified height, and it contains content inside it needs more vertical space than is available by the element.

For example, an element may have overflow content if it has an explicitly set height, and contains an amount of text and/or other content that is too much to fit inside the element’s available size.

The overflow-y property can be used to show the overflow content on the top and/or bottom edges, clip it (hide any excess content that’s outside the element’s boundaries), or add vertical scroll bars to the element so that the overflow content can be seen on scroll.

CSS Syntax

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

Supported Browsers: The browser supported by property are listed below:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example -