CSS overflow-y

The overflow-y property in CSS specifies whether to clip content that overflows the element's bounding box vertically or to add scrollbars when needed.

There are several values that can be used with the overflow-y property:

visible: Default value. Content is not clipped, it may be rendered outside the content box.
hidden: Content that overflows the element's box is hidden.
scroll: Adds a scrollbar to the element if the content overflows.
auto: Adds a scrollbar to the element if the content overflows.

Let's see some examples to understand how overflow-y works:

Result:


    <div style="height: 100px; width: 200px; overflow-y: hidden;">
      This is some long text that will be clipped since overflow-y is set to hidden.
    </div>

This is some long text that will be clipped since overflow-y is set to hidden.

Result:


    <div style="height: 100px; width: 200px; overflow-y: scroll;">
      This is some long text that will show a scrollbar since overflow-y is set to scroll.
    </div>

This is some long text that will show a scrollbar since overflow-y is set to scroll.

By using the overflow-y property, you can control how content is displayed when it exceeds the size of its container vertically.