Overflow media queries
overflow controls what happens when content exceeds the size of its box. It affects clipping, scrollbars, and whether users can reach hidden content.
Overview
overflow controls what happens when content exceeds the size of its box. It affects clipping, scrollbars, and whether users can reach hidden content.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 113 | 113 | 66 | 17 | 113 | 17 | |
| CSS at-rule | ||||||
| The overflow-inline CSS media feature can be used to test how the output device handles content that overflows the initial containing block along the inline axis. | 113 | 113 | 66 | 17 | 113 | 17 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
@media (overflow-block: scroll) {
.sidebar { position: sticky; top: 0; }
}
@media (overflow-block: paged) {
.nav { display: none; }
} Live demo
Use cases
Scrollable panels
Keep large content regions usable inside dashboards or side panels without forcing the entire page to grow.
Media and card clipping
Clip decorative overflow or rounded media while keeping the surrounding layout stable.
Cautions
- overflow: hidden can make content unreachable when text grows, zoom increases, or focus moves outside the visible area.
- Nested scroll regions often create friction on keyboards, touch devices, and assistive technology.
Accessibility
- If an area scrolls independently, make sure users can discover it and move focus into it without losing context.
Related links
Powered by web-features