CSS overflow-inline Property

Description

The overflow-inline property controls how an element handles content that extends beyond its inline dimension — that is, the direction in which text runs within the current writing mode. Because it is a logical property, its effect follows the inline axis of the element rather than the physical left/right or top/bottom directions, so the same declaration adapts automatically when text is laid out horizontally, vertically, or in right-to-left contexts. In practice this means it determines whether overflowing inline content is clipped, allowed to be visible, or creates an inline-axis scrollable area, and therefore influences both visual clipping and the presence or absence of inline-axis scrollbars.

On a layout level, overflow-inline is intended to be used alongside its block-axis counterpart so you can control each axis independently; for example, it composes with overflow-block to give separate overflow behavior on the inline and block axes. It also interacts with the older, physical properties and shorthand: the logical behavior can be expressed together with the shorthand overflow, and maps conceptually to the legacy physical axes overflow-x and overflow-y when the writing mode is horizontal. Because scrollbars, clipping, and hit-testing can differ between axes and between user agents, choosing inline-specific control lets you avoid unintended horizontal scrolling in one writing mode while still allowing vertical scrolling in another.

When using overflow-inline in production, consider internationalization and accessibility implications. Since its behavior depends on writing-mode and direction, prefer the logical property over physical properties when building interfaces that must adapt to vertical text or right-to-left languages: that reduces the need for conditional rules and keeps scrollbar placement and clipping predictable. Also be mindful that enabling scrolling on the inline axis can affect keyboard and touch navigation and may hide content from assistive technology unless you provide clear affordances; conversely, clipping inline overflow is a common way to implement visual truncation or inline scrollers without changing block-axis flow.

Definition

Initial value: auto
Applies to: Block-containers, flex containers, and grid containers
Inherited: no
Computed value: as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
Animatable: yes
JavaScript syntax: object.style.overflowInline

Syntax

overflow-inline: visible | hidden | clip | scroll | auto

Values

visibleContent is not clipped and may be rendered outside the padding box's inline start and end edges.
hiddenContent is clipped if necessary to fit the inline dimension in the padding box. No scrollbars are provided.
clipOverflow content is clipped at the element's overflow clip edge that is defined using the overflow-clip-margin property.
scrollContent 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.
autoDepends 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.

Example

HTML

<div class='container'>

  <h2>overflow-inline examples</h2>

  <div class='row'>

    <figure class='example'>

      <figcaption>overflow-inline: auto</figcaption>

      <div class='box box--auto'>

        <p class='text'>This is a very long single-line text that will overflow the inline axis  -  it demonstrates overflow-inline: auto producing a horizontal scrollbar when needed.</p>

      </div>

    </figure>

    <figure class='example'>

      <figcaption>overflow-inline: hidden</figcaption>

      <div class='box box--hidden'>

        <p class='text'>This is a very long single-line text that will overflow the inline axis  -  it demonstrates overflow-inline: hidden clipping the overflow along the inline axis.</p>

      </div>

    </figure>

  </div>

</div>

CSS

/* Basic layout */
.container {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 20px;
  max-width: 900px;
}

.row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.example {
  width: 360px;
}

.example figcaption {
  margin-bottom: 8px;
  font-weight: 600;
}

/* The box limits the block (vertical) axis but allows different behaviors along the inline (horizontal) axis */
.box {
  width: 300px;
  height: 80px;
  border: 1px solid #ccc;
  padding: 12px;
  background: #fafafa;
  overflow-block: hidden; /* prevent vertical scrolling */
}

/* Inline-axis behaviors */
.box--auto {
  overflow-inline: auto; /* show horizontal scrollbar when content overflows inline axis */
}

.box--hidden {
  overflow-inline: hidden; /* clip overflow along the inline axis */
}

.text {
  margin: 0;
  white-space: nowrap; /* force inline overflow */
  color: #222;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS overflow-inline property. Hover over a browser icon to see the version that first introduced support for this CSS property.