CSS overflow-inline Media Feature

What You’ll Learn

The overflow-inline media feature detects how a device handles content that overflows along the inline axis — usually horizontal scrolling in left-to-right languages.

Introduction

Wide tables, long code lines, and horizontal carousels can extend beyond the viewport width. On screens, users typically scroll horizontally to reach that content. Printers may paginate instead.

The @media (overflow-inline) feature lets CSS detect how the device presents inline-axis overflow — not whether your page happens to overflow right now.

Definition and Usage

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

📝 Syntax

Use a keyword value inside an @media rule:

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

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

Accepted Values

• none — Overflow along the inline axis is not displayed.
• scroll — Users can scroll horizontally 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).

Inline Axis vs Block Axis

overflow-inline vs overflow Property

overflow-inline vs overflow-block

Basic Example

@media (overflow-inline: scroll) {
  body {
    background-color: #fecaca;
  }
}

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

Default Value

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

Syntax Rules

• Use keyword values only: none, scroll, optional-paged, paged.
• There is no auto value — the old reference was incorrect.
• Inline axis follows writing-mode — vertical text uses a vertical inline axis.
• Combine with overflow-block for axis-specific layouts.
• Do not use this to detect whether a specific element currently overflows horizontally.

Related Topics

• overflow-block — block-axis overflow capability
• overflow property — element-level clipping and scrolling
• overflow-x property — horizontal overflow on one element

When to Use overflow-inline

Reach for overflow-inline when horizontal overflow behavior matters:

• Wide data tables — Style scrollable table wrappers when scroll matches.
• Code blocks — Add horizontal scroll affordances on scroll-capable devices.
• Carousels and toolbars — Adapt UI when inline-axis scrolling is available.
• Print layouts — Adjust wide content for paginated inline overflow.
• Writing modes — Handle inline axis correctly in vertical or mixed scripts.

Examples Gallery

Practice overflow-inline with scroll backgrounds, wide tables, nowrap text styling, and block-axis comparisons.

@media (overflow-inline: scroll) {
  body {
    background-color: #fecaca;
  }
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
}

@media (overflow-inline: scroll) {
  .table-wrap {
    border-color: #fca5a5;
    background: #fff5f5;
  }
}

p {
  white-space: nowrap;
}

@media (overflow-inline: scroll) {
  p {
    color: #dc2626;
  }
}

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

@media (overflow-inline: scroll) {
  .inline-axis {
    background: #fecaca;
    border-color: #fca5a5;
  }
}

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

🛠 Usage Tips

• Pair with overflow-x — Use the media feature for device-aware defaults; use overflow-x on wrappers for actual scrolling.
• Assume scroll on screens — Most users browse on scroll-capable inline overflow devices.
• Test print preview — Verify paged rules in the browser print dialog.
• Use logical properties — Inline axis maps to inline-size and margin-inline in modern CSS.
• Combine both overflow features — Handle vertical and horizontal device capabilities separately.

⚠️ Common Pitfalls

• Using auto — overflow-inline has no auto value; use scroll, paged, etc.
• Confusing with overflow property — Media feature vs element styling are different tools.
• Expecting content overflow detection — It reports device capability, not current overflow state.
• Ignoring writing-mode — Inline axis direction changes in vertical writing systems.
• Horizontal scroll without UX — Always provide scroll affordances for wide content.

♿ Accessibility

• Keyboard horizontal scroll — Ensure wide regions are reachable with keyboard navigation.
• Avoid nowrap everywhere — Long unbroken lines hurt readability; use nowrap sparingly.
• Visible focus — Scrollable regions need clear focus indicators.
• Touch scrolling — Wide tables should support touch drag on mobile.
• Zoom support — Horizontal layouts must work when text is enlarged.

💡 Best Practices

Related Topics