CSS overflow-block Media Feature

What You’ll Learn

The overflow-block media feature detects how a device handles content that overflows along the block axis — usually vertical scrolling on screens or page breaks when printing.

Introduction

When a webpage has more content than fits on screen, most browsers let you scroll vertically to see the rest. Printers handle overflow differently — they split content across pages.

The @media (overflow-block) feature lets CSS detect that behavior. It answers: “How does this device show content that overflows along the block axis?”

Definition and Usage

Wrap rules in @media (overflow-block: scroll), @media (overflow-block: paged), or the other accepted values. On laptops and phones, you will almost always match scroll. Print output often matches paged.

📝 Syntax

Use a keyword value inside an @media rule:

@media (overflow-block: scroll) {
  /* Styles for scrollable block overflow */
}

@media (overflow-block: paged) {
  /* Styles for paginated block overflow */
}

Accepted Values

• none — Overflow along the block axis is not displayed.
• scroll — Users can scroll to reach overflowing content (typical on screens).
• optional-paged — Content may paginate but can still scroll on devices like computers.
• paged — Content is broken into discrete pages (common in print).

Block Axis vs Inline Axis

overflow-block vs overflow Property

overflow-block vs overflow-inline

Basic Example

@media (overflow-block: scroll) {
  body {
    background-color: #dbeafe;
  }
}

@media (overflow-block: paged) {
  body {
    background-color: #fef3c7;
  }
}

Default Value

There is no CSS default for overflow-block. The browser evaluates the output device at runtime. Most screens report scroll.

Syntax Rules

• Use keyword values only: none, scroll, optional-paged, paged.
• Block axis follows writing-mode — vertical text uses a horizontal block axis.
• Combine with overflow-inline for axis-specific layouts.
• Pair with @media print for print stylesheets that complement paged output.
• Do not use this to detect whether a specific element overflows — use JavaScript or layout techniques instead.

Related Topics

• overflow-inline — inline-axis overflow capability
• overflow property — element-level clipping and scrolling
• orientation — portrait vs landscape viewport

When to Use overflow-block

Reach for overflow-block when output medium affects reading or layout:

• Scrollable screens — Optimize long articles, sticky headers, and scroll hints when scroll matches.
• Print stylesheets — Apply page-break rules when paged matches.
• E-readers and paginated UIs — Simplify navigation when content is presented as pages.
• Progressive enhancement — Provide richer scroll UX only on scroll-capable devices.
• Writing modes — Adapt block-axis behavior in vertical or mixed writing systems.

Examples Gallery

Practice overflow-block with scroll backgrounds, print page breaks, scroll hints, and inline-axis comparisons.

@media (overflow-block: scroll) {
  body {
    background-color: #dbeafe;
  }
}

@media (overflow-block: paged) {
  article {
    page-break-inside: avoid;
  }

  h1, h2 {
    page-break-after: avoid;
  }
}

.scroll-hint {
  display: none;
  text-align: center;
  padding: 0.5rem;
  color: #64748b;
  font-size: 0.875rem;
}

@media (overflow-block: scroll) {
  .scroll-hint {
    display: block;
  }
}

.block-axis {
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
}

@media (overflow-block: scroll) {
  .block-axis {
    background: #dbeafe;
    border-color: #93c5fd;
  }
}

@media (overflow-inline: scroll) {
  .inline-axis {
    background: #dcfce7;
    border-color: #86efac;
  }
}

🛠 Usage Tips

• Start with scroll — Most users browse on scroll-capable screens; treat scroll as your default assumption.
• Layer print CSS — Combine overflow-block: paged with @media print for robust print layouts.
• Progressive enhancement — Base styles should work everywhere; add scroll-specific polish when scroll matches.
• Test print preview — Use the browser print dialog to verify paged rules.
• Pair with overflow-inline — Handle horizontal and vertical overflow capabilities separately.

⚠️ Common Pitfalls

• Confusing with overflow property — overflow-block is a media feature, not element styling.
• Expecting runtime overflow detection — It reports device capability, not whether content currently overflows.
• Ignoring writing-mode — Block axis direction changes in vertical writing systems.
• Only testing on screen — paged rules matter for print even if they never match on your monitor.
• Replacing @media print entirely — Use both print media type and overflow features where appropriate.

♿ Accessibility

• Keyboard scrolling — Ensure scrollable layouts remain operable with keyboard and focus visible.
• Print readability — Page-break rules should not split headings from their content.
• Motion sensitivity — Scroll hints should not rely on animation alone to convey meaning.
• Zoom support — Paginated and scroll layouts must tolerate text resizing.
• Screen readers — Do not hide essential content on none devices without an alternative.

💡 Best Practices

Related Topics