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

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

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.

Powered by web-features