CSS overflow-y Property | Values, Examples & Browser Support

The overflow-y property controls what happens when an element's content is taller than its container. You can let the content spill out, clip it invisibly, or add a scrollbar — either always or only when needed.

overflow-y is one half of the two-axis overflow shorthand. Its counterpart overflow-x handles the horizontal direction. Together they give you fine-grained control over how a box clips and scrolls.

Property reference


Initial value	`visible`
Applies to	Block containers, flex containers, and grid containers
Inherited	No
Animatable	No
Version	CSS3
DOM syntax	`element.style.overflowY = "scroll"`

Syntax

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

Values

Value	Description
`visible`	Content is not clipped and can render beyond the top and bottom padding edges. This is the default.
`hidden`	Content is clipped at the padding box. No scrollbar is provided; clipped content is inaccessible.
`scroll`	Content is clipped and a scrollbar is always shown, even if the content fits.
`auto`	Content is clipped only when it overflows. The browser adds a scrollbar automatically when needed.
`clip`	Content is clipped like `hidden` but also disables programmatic scrolling (`scrollTop`). More aggressive than `hidden`.
`initial`	Resets the property to its default value (`visible`).
`inherit`	Inherits the computed value from the parent element.

Info

When overflow-y is set to scroll, auto, or hidden, the browser automatically changes any visible value on overflow-x to auto. This is because a box cannot be clipped in one axis while remaining truly unconstrained in the other — the spec disallows that combination.

When to use each value

visible — the default; useful when you intentionally want an element (like a tooltip or dropdown) to overflow its bounds without being cut off.
hidden — use to clip decorative overflow (e.g., a large background image that should not cause page scrollbars) or to establish a new block formatting context.
scroll — use when you always want the scrollbar gutter reserved so the layout does not shift when content grows. Useful in sidebars or panels where layout stability matters.
auto — the most common choice for scrollable regions. The scrollbar appears only when the content actually overflows, avoiding the permanent gutter that scroll creates.
clip — use when you need to prevent all scrolling (including JavaScript scrollTop manipulation) inside a contained region, without showing any scrollbar.

Examples

`overflow-y: scroll`

The scrollbar is always rendered, even if all the text fits. The container clips vertically and allows the user to scroll.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: scroll</h3>
    <div class="scroll">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Try it Yourself »

`overflow-y: visible`

Content renders beyond the container's bottom edge. Notice that the text bleeds outside the green box — no clipping occurs.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.visible {
        background-color: #8ebf42;
        color: #666;
        height: 40px;
        width: 200px;
        overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: visible</h3>
    <div class="visible">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Try it Yourself »

`overflow-y: hidden`

Content is clipped at the container's bottom edge. No scrollbar appears and the clipped content cannot be reached by scrolling.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.hidden {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: hidden</h3>
    <div class="hidden">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Try it Yourself »

`overflow-y: auto`

A scrollbar appears only when the text overflows the fixed height. If the content were shorter than 60 px, no scrollbar would be shown.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.auto {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: auto</h3>
    <div class="auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Try it Yourself »

All values side by side

This example places all four core values next to each other so you can compare their visual behaviour at a glance.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: scroll;
      }
      div.hidden {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: hidden;
      }
      div.auto {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: auto;
      }
      div.visible {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>overflow-y: scroll</h3>
    <div class="scroll">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
    </div>
    <h3>overflow-y: hidden</h3>
    <div class="hidden">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>overflow-y: auto</h3>
    <div class="auto">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>overflow-y: visible</h3>
    <div class="visible">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </body>
</html>

Try it Yourself »

Common gotchas

overflow-y: visible is silently changed by the browser. If you set overflow-x to any value other than visible on the same element, overflow-y: visible is treated as auto. The spec requires both axes to be visible if either is to remain truly unconstrained.

overflow-y: hidden creates a scroll container without a scrollbar. Users cannot scroll with a mouse wheel or touch gesture, but JavaScript can still move the scroll position via scrollTop. Use overflow-y: clip if you want to prevent that as well.

A fixed height is required for scroll and auto to take effect. Without a constrained height the element simply grows to fit its content, so no overflow ever occurs and no scrollbar appears.

Touch scrolling on mobile. To enable momentum-based scrolling in an overflow-y: auto or overflow-y: scroll container on iOS Safari, you may need to add -webkit-overflow-scrolling: touch in older codebases (this is no longer required in modern iOS versions where it is enabled by default).

Stacking contexts. Setting overflow-y to any value other than visible creates a new stacking context on that element. This can affect how z-index behaves on child elements that try to overflow the container.

overflow — shorthand for both axes
overflow-x — horizontal overflow behaviour
overflow-wrap — controls line-breaking for long words
text-overflow — how clipped inline text is signalled (e.g., ellipsis)
scroll-behavior — whether scrolling animates smoothly or jumps
resize — lets users resize a scrollable container
height — the height constraint that triggers overflow

Practice

What does the overflow-y property in CSS do?

It sets what to do when content is too big to fit in its box vertically and it overflows.It sets the background color of an element.It allows to set the visibility of elements.It controls how overflowed content is displayed vertically.It determines how content is aligned within its box horizontally.

Property reference

Syntax

Values

When to use each value

Examples

overflow-y: scroll

overflow-y: visible

overflow-y: hidden

overflow-y: auto

All values side by side

Common gotchas

Related properties

Practice

`overflow-y: scroll`

`overflow-y: visible`

`overflow-y: hidden`

`overflow-y: auto`