CSS overflow-inline Property

This property controls how content is handled when it overflows the edges of an element in the inline direction. It automatically maps to the horizontal or vertical axis depending on the writing mode of the document.

selector { overflow-inline: value; }
visible Content is not clipped and may be rendered outside the padding box.
hidden Content is clipped and no scrollbars are provided to view the hidden content.
scroll Content is clipped and scrollbars are always visible regardless of whether content overflows.
auto Scrollbars are provided only if the content actually overflows the container.
clip Content is clipped to the element's overflow clip edge with no scrolling possible.

Code Examples

A basic example showing a container that automatically adds a scrollbar in the inline direction when text becomes too long.

<div style="width: 200px; border: 2px solid #333333; overflow-inline: auto; white-space: nowrap;">
  This is a long string of text that will definitely overflow the container and trigger a scrollbar.
</div>

An advanced example using JavaScript to toggle the writing mode, demonstrating how overflow-inline switches which axis it controls.

<div id="box" style="width: 150px; height: 100px; border: 5px solid #ff0000; overflow-inline: scroll; writing-mode: horizontal-tb;">
  <div style="width: 300px; background-color: #eeeeee;">Scrollable Content</div>
</div>

<button onclick="toggleDirection()">Toggle Writing Mode</button>

<script>
function toggleDirection() {
  const box = document.getElementById("box");
  if (box.style.writingMode === "horizontal-tb") {
    box.style.writingMode = "vertical-rl";
  } else {
    box.style.writingMode = "horizontal-tb";
  }
}
</script>

Pro Tip

You can use "overflow-inline: auto" along with "white-space: nowrap" to create a quick horizontal navigation bar for mobile devices. It keeps the links on one line and lets the user swipe through them without you having to worry about physical axis calculations.

Deep Dive

Think of the inline direction as the way words flow in a sentence. In English, that is left-to-right. In some other languages, it is right-to-left or even top-to-bottom. Using "overflow-inline" instead of the old-school "overflow-x" is like hiring a translator who knows which way the wind blows. It ensures your layout logic stays intact even if the text direction changes. Technically, it sets the overflow behavior for the start and end sides of the box in the inline dimension. If you are working in a standard horizontal writing mode, this property behaves exactly like "overflow-x". However, if you switch to a vertical writing mode, it starts controlling the vertical overflow instead.

Best Practices

Use "overflow-inline" when you want your layout to be future-proof and internationally friendly. It is best used in components that might be reused across different language contexts. Always pair it with a defined size or "white-space: nowrap" if you are trying to force a scrollable area, otherwise the container might just expand to fit the content.

Common Pitfalls

The most common mistake is forgetting that this property is part of the Logical Properties specification. If you mix "overflow-inline" with physical properties like "overflow-x" on the same element, the physical property might override the logical one depending on the order in the CSS file. Also, "visible" is the default, so if you don't see scrollbars, that is likely why.

Accessibility

If you set this to "hidden" or "clip", you might be cutting off information that users need. Always ensure that if content is hidden, there is an alternative way to access it. For scrollable areas, make sure the scrollable container can be focused via the keyboard so users without a mouse can navigate through the overflowing content.

Dev Data Table: overflow-inline property

default visible
animatable no
inherited no
experimental no
year_intro 2018
year_standard 2021
js_syntax_1 element.style.overflowInline = "scroll";
js_syntax_2 element.style.setProperty("overflow-inline", "scroll");
js_note When manipulating this property in JavaScript, remember it acts as a logical proxy for the physical axis based on the current writing mode.
browsers { "Chrome": 89, "Edge": 89, "Firefox": 63, "Safari": 14.1, "Opera": 75, "Chrome Android": 89, "Safari on iOS": 14.5, "Samsung Internet": 15, "Opera Mobile": 63 }
results render here...