CSS overflow-block Property

Sets the overflow behavior for the block axis of an element. It maps to the vertical or horizontal overflow depending on the defined writing mode.

selector { overflow-block: value; }

visible	Content is not clipped and renders outside the element box.
hidden	Content is clipped at the block edges and no scrollbars are shown.
clip	Content is strictly clipped to the overflow clip edge with no programmatic scrolling allowed.
scroll	Scrollbars are always visible even if the content does not overflow the block axis.
auto	Scrollbars appear only when the content exceeds the dimensions of the block axis.

Code Examples

A basic example showing a fixed-size container that automatically provides a scrollbar on the block axis when content overflows.

<div style="inline-size: 200px; block-size: 100px; overflow-block: auto; border: 1px solid #000000;">
  This content will scroll vertically because the block axis in default horizontal writing modes is vertical. If the text becomes longer than 100px, the browser will provide a scrollbar.
</div>

An advanced example using a vertical writing mode to demonstrate how the block axis shifts, including a JavaScript toggle to change overflow behavior.

<div id="box" style="inline-size: 250px; block-size: 150px; overflow-block: hidden; writing-mode: vertical-rl; border: 2px solid #ff0000;">
  In this vertical writing mode, the block axis is horizontal. The overflow-block: hidden property will clip content that spills out to the left.
</div>
<button onclick="toggleOverflow()">Toggle Scroll</button>
<script>
function toggleOverflow() {
  const el = document.getElementById("box");
  const isHidden = el.style.overflowBlock === "hidden";
  el.style.overflowBlock = isHidden ? "scroll" : "hidden";
}
</script>

Pro Tip

Pair this with the writing-mode property to see how it dynamically shifts axes. It saves you from writing media queries or extra classes just to fix scrollbars when your site switches between different language orientations.

Deep Dive

Think of the block axis like a stack of trays. In standard English layout, you stack trays vertically. If you have too many trays for the shelf height, this property decides if you hide them, show a scrollbar, or let them spill out. Because this is a logical property, it is smarter than the physical overflow-y property. If you change your writing mode to a vertical style, the block axis flips to horizontal automatically. This allows your layout logic to follow the flow of the text rather than being stuck to the physical top and bottom of the screen.

Best Practices

Use this property instead of overflow-y when you are building internationalized layouts. It ensures that your scroll behavior remains consistent with the direction the user is reading and stacking content, regardless of whether they are reading horizontally or vertically.

Common Pitfalls

A common mistake is forgetting that this only affects the block axis. If you have text spanning too wide in a line, overflow-block won't touch it; you would need overflow-inline for that. Also, remember that the container needs a defined size in the block dimension for any clipping or scrolling to actually happen.

Accessibility

If you use hidden or clip, ensure the obscured content is not essential for the user's understanding of the page. If a region is scrollable, ensure it can be focused via the keyboard by adding a tabindex of 0 so that users who do not use a mouse can still scroll through the content.

Dev Data Table: overflow-block property

default	visible
animatable	no
inherited	no
experimental	no
year_intro	2017
year_standard	2021
js_syntax_1	element.style.overflowBlock = "scroll";
js_syntax_2	element.style.setProperty("overflow-block", "scroll");
js_note	When manipulating this property in JavaScript, use the camelCase version overflowBlock or the setProperty method for the hyphenated string.
browsers	{ "Chrome": 69, "Edge": 79, "Firefox": 35, "Safari": 14.1, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 14.5, "Samsung Internet": 10.1, "Opera Mobile": 48 }