The CSS overflow-y property determines what happens when there is an overflow of content on the vertical axis (from top to bottom) of an element.

    .container{  
        display: inline-block;
        background-color: #F7F96F;
        padding-left: 2rem;
        padding-right: 3rem;
        overflow-x: scroll; // overflow-y property
        border-top: 1rem solid #FFEB3B;
    }

An overflow occurs when the content in the box-model crosses any of the four box edges (the edges that make up the box edges are the content edge, padding edge, border edge, and margin edge).

An overflow usually happens due to the styling set on the element and its descendants. For example, the code below sets the left and right padding to be high enough that the content exceeds its padding box for an overflow to occur on the vertical axis of the element. And to handle this overflow, we set overflow-y to scroll.

Overflow Types

There are two types of overflows that can occur in HTML elements:

1. Ink overflow
2. Scrollable overflow

Ink Overflow

The ink overflow is any overflow that occurs outside the border-box. Examples of this would be the overflow that occurs in outlines (i.e the border-image-outset CSS property), box shadows, border images, text decoration, and overhanging glyphs.

This kind of overflow does not affect the overall layout and it does not cause a scrolling mechanism to appear.

Scrollable Overflow

The scrollable overflow is a type of overflow that occurs when the content extends outside the box-model’s padding edge. A scrolling mechanism is usually provided in this case.

This kind of overflow does affect the overall layout and it does cause a scrolling mechanism to appear.

Syntax

    overflow-y: visible | hidden | clip | scroll | auto

• Initial value: visible
• Applies to: block containers, flex containers, grid containers, and elements with natural dimensions e.g bitmap images
• Inherited: no
• Percentages: n/a
• Computed value: as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
• Animation type: by computed value

The overflow-y is one of the properties in the overflow CSS shorthand property. The second and last is the overflow-x property which determines what happens when there is an overflow of content **on the horizontal axis (from left to right) of an element.

The overflow-y property is defined in the CSS Overflow Module Level 3 specification.

Values

    /* Keyword Values */
    overflow-y: visible;
    overflow-y: scroll;
    overflow-y: hidden;
    overflow-y: clip;
    overflow-y: auto;

    /* Global Values */
    overflow-y: inherit;
    overflow-y: initial;
    overflow-y: revert;
    overflow-y: revert-layer;
    overflow-y: unset;

visible

This is the default value of the overflow-y property which renders the overflowed content outside the box’s container without providing a scroll mechanism.

scroll

The scroll value clips the content to the padding box, and in overflow-y's case, it clips it vertically (i.e from top to bottom).

If the browser uses a scrolling mechanism like a scrollbar, the scrollbar will be shown whether or not the content is clipped. This avoids the issue of scrollbars disappearing and reappearing in a dynamic environment. If it is printable media, the overflowed content may be printed with the rest of the content.

Note that if the browser notices a horizontal overflow occurs and only the CSS overflow-y property was set, the browser automatically brings out a horizontal scrollbar for it even though overflow-x wasn’t set.

To illustrate this, we use the example above, but we set the left padding of the element to 7rem, causing there to be an overflow on its vertical axis as well. Notice how a scrollbar was generated on its horizontal axis without setting the CSS overflow-x property.

If overflow-y is removed and there is a vertical and horizontal overflow, the overflowed content defaults to being visible.

hidden

The hidden value clips the content to its padding box in such a way that it hides the vertically overflowed content. It’s kind of like how visibility: hidden works, except that in this case, the content is clipped and not invisible.

The browser doesn’t provide a scrollbar in this case, nor is scrolling allowed by direct touch from the user via a touch screen, or through the use of a mouse wheel. It does allow programmatic scrolling through JavaScript using scrolling methods from the Window objects like scroll(), scrollTo(), and scrollBy(). Therefore, the box is still a scrollable container.

clip

Similar to the way the value hidden works where the content is clipped to the element’s padding box and any form of scrolling is not allowed. The difference is that programmatic scrolling cannot be done here via JavaScript. This means that the box is not a scrollable container in any way.

auto

On most browsers, if auto is set, it equates it to the scroll value, meaning a scrollbar shown vertically. If not, the auto value equates to the hidden value, meaning the content will be clipped to its padding box. It’s all dependent on the browser’s choice.

Example

Select any value from the dropdown to change the value of oveflow-y to see how each value affects the note differently.

Browser Support

Resources

• CSS Overflow Module Level 3 specification (W3C specification)
• overflow-y (MDN)