CSS overflow-y Property

This property manages how vertical content is handled when it is too tall to fit inside its container's height.

selector { overflow-y: value; }
visible Content is not clipped and will render outside the element box if it exceeds the height.
hidden Content is clipped at the element height and no scrollbars are provided to the user.
scroll Content is clipped and the browser always displays scrollbars regardless of whether the content overflows.
auto The browser only displays scrollbars if the content actually exceeds the height of the container.
clip Similar to hidden, but it strictly forbids any scrolling, including programmatic scrolling via JavaScript.

Code Examples

A basic demonstration of overflow-y: auto where the scrollbar only appears if content exceeds 100px.

<div style="height: 100px; overflow-y: auto; border: 2px solid #333333; padding: 10px;">
  This is a basic example. Since this text is short, no scrollbar appears. But if we added much more text here, the "auto" value would trigger a vertical scrollbar automatically so the user can read everything without the container growing taller than 100px.
</div>

An advanced terminal-style window using overflow-y: scroll and JavaScript to keep the view locked to the most recent entry.

<div id="status-window" style="height: 120px; overflow-y: scroll; background-color: #222222; color: #00ff00; font-family: monospace; padding: 10px; border-radius: 4px;">
  <div>[System] Initializing...</div>
</div>
<button onclick="addStatus()" style="margin-top: 10px;">Generate Log</button>

<script>
function addStatus() {
  const win = document.getElementById("status-window");
  const entry = document.createElement("div");
  entry.textContent = "[Log] Event recorded at " + new Date().toLocaleTimeString();
  win.appendChild(entry);
  // Keep the window scrolled to the bottom
  win.scrollTop = win.scrollHeight;
}
</script>

Pro Tip

If you want to stop the entire page from scrolling when a user reaches the end of a scrollable div, use the property "overscroll-behavior-y: contain;". This prevents "scroll chaining" and keeps the user focused on the specific element they are interacting with.

Deep Dive

Think of overflow-y as a window frame. If you are trying to fit a ten-foot tall painting behind a four-foot tall window, you have a problem. This property tells the browser how to handle that extra height. If you set it to "visible", the painting just hangs out the bottom of the frame and covers whatever is below it. If you set it to "scroll" or "auto", you are essentially turning that window into a viewport where the user can slide the painting up and down. Crucially, this property only works if the container has a constrained height, like "height" or "max-height". Without a height constraint, the container just grows forever and there is never any overflow to manage.

Best Practices

Use "auto" instead of "scroll" for a cleaner user interface. This ensures that scrollbars only appear when they are actually needed. If you use "scroll", the browser will show a gutter for the scrollbar even if the content fits perfectly, which often looks like an accidental design glitch. Also, always ensure your container has a set height, otherwise this property won't do a thing.

Common Pitfalls

A major quirk in CSS is that if you set overflow-y to "hidden" or "scroll", and you leave overflow-x as "visible", the browser will automatically change overflow-x to "auto". You cannot have one axis visible while the other is clipped. Another thing to watch for is that scrollbars can take up physical width in some browsers, which might squeeze your content or cause horizontal scrolling if you are not careful with your widths.

Accessibility

Hiding overflow can be a disaster for accessibility. If you set this to "hidden" and the content is too large, users with screen readers or those who use keyboard navigation might never be able to access the clipped information. If the content is scrollable, make sure it is focusable so keyboard users can actually scroll through it. Never hide content that is essential for understanding the page without providing an alternative way to see it.

Dev Data Table: overflow-y property

default visible
animatable no
inherited no
experimental no
year_intro 2002
year_standard 2011
js_syntax_1 object.style.overflowY = "scroll";
js_syntax_2 object.style.setProperty("overflow-y", "scroll");
js_note In JavaScript, the property is accessed using the camelCase version overflowY when interacting with the style object directly.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1.5, "Safari": 3, "Opera": 9.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10 }
results render here...