Overflow-Y Property
Last updated: 2026-09-13
overflow-y Overflow-Y Property
The overflow-y property controls specifically how content overflowing a container vertically is handled and accepts the same values as overflow. The default value, visible, lets the overflow show. It is the most commonly used overflow control and is often paired with max-height for scrollable regions of a fixed height.
| Category | |
|---|---|
| Initial Value | visible |
| Inherited | No |
| Applies To | block-container |
| Animation Type | discrete |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
overflow-y: visible | hidden | clip | scroll | auto;⚙️ Values
| Value | Type | Description |
|---|---|---|
visible | hidden | scroll | auto | Keyword | Vertical overflow handling. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overflow-y | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10 |
| Supported in all major browsers | |||||
Tip： overflow-y:auto hides the scrollbar when content does not overflow and shows it only when it does, which looks nicer than scroll.
❓ FAQ
QHow do I make a div's content scroll when it overflows?
AGive the div a height limit plus overflow-y:auto, for example .list { max-height:300px; overflow-y:auto; }. When content exceeds the height, a vertical scrollbar appears; when it does not, no scrollbar shows. Prefer max-height over height so short content leaves no empty space. This is the standard pattern for chat windows, notification lists, and similar scrolling panels, and it degrades gracefully since the container simply grows when overflow is unsupported.
QWhat does overflow-y:hidden do?
AVertically overflowing content is clipped and hidden, and users cannot scroll to see the cut-off portion. It suits fixed display areas where content is guaranteed to fit, like a fixed-height banner, or regions with JS-controlled scrolling. Note that it disables scrolling entirely: if you just want to hide the scrollbar while keeping scrolling, for a custom scrollbar, overflow-y:hidden will not do; you need a visible and scroll container trick instead.
QWhat's the difference between overflow-y:auto and overflow-y:scroll?
Ascroll always shows a vertical scrollbar, even when content does not overflow, so the scrollbar track is permanently reserved. auto shows the scrollbar only when content overflows and hides it otherwise. Visually, auto is cleaner with no leftover track, which is why it is recommended for everyday layouts. scroll suits cases where you want to signal that the region scrolls, such as tutorial panels.
QCan overflow-x and overflow-y be set together?
AYes, but with one rule: when both are visible, content overflows normally; as soon as one axis is not visible, the other axis's visible is automatically rewritten to auto. For example, overflow-x:hidden; overflow-y:visible actually becomes overflow-y:auto. This is why you may see unexpected auto scrollbars after setting a single axis, and it also means you cannot combine a truly visible vertical overflow with a clipped horizontal one.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
