CSS overflow-inline Property

❮ Previous Reference Next ❯


div {
  overflow-inline: hidden;
  margin-bottom: 150px;


The overflow-inline CSS property sets what shows when content overflows the inline start and end edges of a box. This may be nothing, a scroll bar, or the overflow content.

Note: The overflow-inline property maps to overflow-x or overflow-y depending on the writing mode of the document.

Default value:auto
JavaScript syntax:

Standard Syntax

overflow-inline: auto|visible|hidden|scroll|initial|inherit|revert|revert-layer|unset;

Browser Support


Property Values

The following table describes the values of this property:

Value Description
auto Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.
visible Content is not clipped and may be rendered outside the padding box's inline start and end edges.
hidden Content is clipped if necessary to fit the inline dimension in the padding box. No scrollbars are provided.
scroll Content is clipped if necessary to fit in the padding box in the inline dimension. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  overflow-inline: auto;
❮ Previous Reference Next ❯