overflow-inline
Overview
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.
Values
| Value | Description |
|---|---|
visible | Content isn't clipped, allowing it to appear outside the inline start and end edges of the box. |
hidden | Content exceeding the inline dimensions of the box is clipped, and no scrollbars are shown. |
clip | The overflowing content is clipped at the box's overflow clip edge as determined by the overflow-clip-margin property. |
scroll | If necessary, content is clipped to fit within the inline dimensions of the box, with scrollbars visible regardless of actual content clipping. |
auto | Depending 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
clipdisplayoverflowoverflow-blockoverflow-clip-marginoverflow-xoverflow-ytext-overflowwhite-space
Tips and Tricks
At the time of writing, Firefox and Firefox for Android are the only browsers that support the
overflow-inlineproperty.For more widely supported alternatives, consider using the
overflow,overflow-x, oroverflow-yproperties.The computed value of
overflow-inlinemay differ from the specified value if one of theoverflow-xoroverflow-yproperties is neither visible nor clip.
Browser Compatibility
| Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
|---|---|---|---|---|---|---|
| Support | No | No | No | Yes* | No | No |
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
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