Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
CSS Overflow-y Property

CSS Overflow-y Property

By Riya Verma
4 mins read
Last updated: 4 May 2023
145 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

The overflow-y property determines whether to clip, add a scroll bar, or display overflow content when a block-level element overflows the content box vertically (i.e., top and bottom).

Syntax

CSS overflow y accepts keyword and global values like visible, hidden, clip, scroll, auto, inherit, etc. The default value of the CSS overflow-y property is visible.

We will discuss the various CSS overflow y supported property values in the following section of the article.

Overflow-y in CSS

ValueDescriptionSyntax
visibleIt is the default value. The visible keyword renders the content outside the padding box and prevents the clipping of the content.overflow-y;
hiddenThe hidden keyword clips the content to fit it vertically in the padding box. There are no scrollbars provided.overflow-y;
clipThe clip value acts similarly to the hidden keyword. When CSS property overflow is hidden, the contents overflowing get hidden, but potentially they can be scrolled into view. In contrast, with the clip keyword, the overflow gets clipped off.overflow-y;
scrollThe scroll keyword clips the content and adds a scrollbar mechanism.overflow-y;
AutoThe auto keyword depends on the user agent. If content fits inside the padding box, it looks the same as visible; otherwise, it causes a scrolling mechanism.overflow-y;
inheritIt inherits the overflow behavior from its parent element.overflow-y;

Note: If overflow-x is hidden, scroll, or auto, then overflow-y will implicitly compute to auto if it is not specified.

Examples

Setting overflow-y Behavior

Let us explore the CSS overflow y supported property values through the following example.

HTML:

CSS:

Output:

output-css-overflow-y-property

  • The hidden keyword clips the overflowing content of the first block.
  • The scroll keyword adds a scrollbar for the second box.
  • The overflowing content overflows outside the third box.
  • The auto keyword adds a scrollbar because the content overflows the fourth box.
  • The inherit keyword inherits the default overflow-y behavior.

Browser Support

The following browsers support the CSS overflow y property:

BrowserVersion
Google Chrome1.0
Safari3
Mozilla Firefox3.5
Microsoft Edge12.0
Opera9.5
Chrome Android18
Firefox for Android4
Opera Android14
Safari on iOS1
Samsung Internet1.0
WebView Android4.4

Conclusion

  • The overflow-y CSS property handles the overflow behavior of the content.
  • It can clip the overflowing content, add a scrollbar behavior or display the overflowing content outside the container.
  • CSS overflow y accepts keyword and global values like visible, hidden, clip, scroll, auto, inherit, etc.
  • The default value of the CSS overflow-y property is visible.