CSS overflow-block Media Feature

Definition and Usage

The overflow-block media feature tests how the output device handles content that overflows along the block axis (usually vertical in English layouts).

It does not mean overflow is happening. It reports the device’s handling style: scroll on typical screens, pages for print, and so on. Pair it with overflow-inline for the other axis.

CSS Syntax

One keyword per query. Example: @media (overflow-block: scroll) { … }.

Feature Values

How to Use overflow-block

Enhance styles for scroll devices or paged output — keep a solid default first.

1. Write base styles that work without the query.
2. Add @media (overflow-block: scroll) for typical screens (extra spacing, sticky UI, …).
3. Add @media (overflow-block: paged) or print rules for page-friendly layout.
4. Check matches with DevTools or matchMedia (live preview below).

Live Preview

This page checks your browser with matchMedia for each keyword. On most screens only scroll matches.

CSS Examples

On your machine, only matching queries apply. Screens usually light up the scroll example. Use Try It Yourself for a live editor.

<style>
  .box {
    padding: 1rem;
    background: #e2e8f0;
  }

  @media (overflow-block: scroll) {
    .box { background: #dbeafe; }
  }
</style>

<div class="box">Blue on scroll devices.</div>

<style>
  .box {
    padding: 1rem;
    background: #e2e8f0;
  }

  @media (overflow-block: paged) {
    .box { background: #fef3c7; }
  }
</style>

<div class="box">Amber on paged devices.</div>

<style>
  .box {
    padding: 1rem;
    background: #e2e8f0;
  }

  @media (overflow-block: scroll) and (overflow-inline: scroll) {
    .box { background: #dcfce7; }
  }
</style>

<div class="box">Green when both axes can scroll.</div>

Key Takeaways