CSS overflow-inline Media Feature

Definition and Usage

The overflow-inline media feature tests how the output device handles content that overflows the initial containing block along the inline axis (the direction text runs in a line—usually horizontal in English).

It does not create overflow and is not the same as the overflow property. On most screens in browsers, the matched value is scroll.

CSS Syntax

Use it inside an @media rule to gate styles for scrollable vs non-scrollable inline overflow.

Feature Values

How to Use overflow-inline

Query the device capability first, then style wide content only when scrolling is available.

1. Decide which axis matters—inline for horizontal text flow in LTR/RTL languages.
2. Wrap styles in @media (overflow-inline: scroll) (or none).
3. Add layout rules for wide tables, toolbars, or nowrap lines.
4. Pair with overflow-block when both axes matter.

Live Preview

This browser’s current match for overflow-inline (via matchMedia).

CSS Examples

Each snippet focuses on overflow-inline. Use Try It Yourself for a live editor.

<style>
  @media (overflow-inline: scroll) {
    p {
      color: #b91c1c;
    }
  }
</style>

<p>Inline overflow can be scrolled on this device.</p>

<style>
  p {
    white-space: nowrap;
  }

  @media (overflow-inline: scroll) {
    p {
      color: #b91c1c;
    }
  }
</style>

<p>This long single line may overflow the viewport horizontally.</p>

<style>
  @media (overflow-inline: scroll) and (overflow-block: scroll) {
    p {
      color: #1d4ed8;
    }
  }
</style>

<p>Both axes support scrolling.</p>

Key Takeaways