Widely available Essential, but potentially dangerous when it hides content accidentally. Use intentionally and test with zoom, keyboard navigation, and long strings.

Overflow media queries

The overflow-block CSS media feature can be used to test how the output device handles content that overflows the initial containing block along the block axis.

Note: The overflow-block property does not determine whether overflow occurs; rather, it reveals the device's handling of such overflow. Typically, on screens in most browsers, the behavior will be "scroll": when content exceeds the available vertical space, the device allows you to scroll to access the overflowed content.

LayoutScrollingClipping

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.overflow-block
113
113
66
17
113
17
CSS at-rule
overflow-inline

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

overflow-block: scroll

CSS Overflow-block: scroll demo.

PreviewFullscreen

overflow-block: paged

CSS Overflow-block: paged demo.

PreviewFullscreen

overflow-block: none

CSS Overflow-block: none demo.

PreviewFullscreen

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