1. css
  2. /properties
  3. /overflow-inline



The overflow-inline property determines how content behaves when it exceeds the inline start and end edges of a box. This could result in nothing being displayed, a scrollbar appearing, or the overflow content showing.

It functions similarly to the well-supported overflow property, but its impact is confined to the inline axis (i.e., the direction in which lines of text are laid out). Notably, overflow-inline aligns with either overflow-x or overflow-y, depending on the document's writing mode.

Examples and Usage

At the time of writing (June 2023), overflow-inline is not widely supported among browsers. However, the intent is to allow developers to control the overflow of elements along the inline axis.

So, let's examine how overflow-inline can be specified:

/* Content not clipped, may render outside the inline dimensions */
.element-example-visible {
  overflow-inline: visible;

/* Content clipped to fit inline dimensions, no scrollbars */
.element-example-hidden {
  overflow-inline: hidden;

/* Overflow content clipped at edge defined by overflow-clip-margin */
.element-example-clip {
  overflow-inline: clip;
  overflow-clip-margin: /* clip-margin value */

/* Content clipped to fit inline dimensions, scrollbars always displayed */
.element-example-scroll {
  overflow-inline: scroll;

/* User-agent dependent behavior, appearing as 'visible' or displaying scrollbars as needed */
.element-example-auto {
  overflow-inline: auto;

These examples are provided for illustrative purposes only. Developers are encouraged to understand the function and support of the overflow-inline property before utilizing it. For more established and widely supported solutions, it's advised to explore other related properties.


visibleContent isn't clipped, allowing it to appear outside the inline start and end edges of the box.
hiddenContent exceeding the inline dimensions of the box is clipped, and no scrollbars are shown.
clipThe overflowing content is clipped at the box's overflow clip edge as determined by the overflow-clip-margin property.
scrollIf necessary, content is clipped to fit within the inline dimensions of the box, with scrollbars visible regardless of actual content clipping.
autoDepending on the user agent, if the content fits inside the padding box, it appears as if visible was set. If the content overflows, scrollbars may appear.

Associated Properties

  • clip
  • display
  • overflow
  • overflow-block
  • overflow-clip-margin
  • overflow-x
  • overflow-y
  • text-overflow
  • white-space

Tips and Tricks

  • At the time of writing, Firefox and Firefox for Android are the only browsers that support the overflow-inline property.

  • For more widely supported alternatives, consider using the overflow, overflow-x, or overflow-y properties.

  • The computed value of overflow-inline may differ from the specified value if one of the overflow-x or overflow-y properties is neither visible nor clip.

Browser Compatibility

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: overflow-inline

W3C's Editor's Draft of CSS Overflow Module Level 3: Managing Overflow

W3C's Working Draft of CSS Overflow Module Level 3: Managing Overflow