In this section, we will learn what the overflow-y property is and how to use it in CSS.

CSS overflow-y Property Definition and Usage

The CSS overflow-y property is used to control what should be done when vertically the content of an element overflowed.

Note: if you want to horizontally control an overflow in an element, you can use the overflow-x property. Also, the CSS overflow property controls overflow in both horizontal and vertical directions, so it could be used instead of these two properties if the purpose is to handle both directions overflow in an element.

CSS overflow-y Property Syntax

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

CSS overflow-y Property Value

Here’s the list of values that could be used for this property:

• visible: this is the default value, and it basically lets the content that vertically passed the boundary of an element to be visible.
• hidden: using this value, any content that vertically passed the boundary of an element will be trimmed or hidden from users.
• scroll: if we set the value to “scroll”, browsers will add a scrollbar to the target element so that users can scroll and see the invisible content. (the scrollbar will be with the target element even if there’s no overflow)
• auto: This value pretty much acts the way “scroll” does with the exception of only shows scrollbars when overflow occurred.

Example: overflow-y in CSS

See the Pen overflow-y in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.