v135 · css

CSS Logical Overflow

The overflow-inline and overflow-block CSS properties allow setting overflow in inline and block direction relative to the writing-mode. In a horizontal writing-mode overflow-inline maps to overflow-x, while in a vertical writing-mode it maps to overflow-y.

concepts

  1. overflow-inline/block

    Live matrix — pick writing-mode, then watch overflow-inline and overflow-block map onto the right physical axis.

  2. RTL scroller, three writing modes

    One stylesheet, three reading directions. The same overflow-inline: auto rule produces an LTR English carousel, a RTL Arabic carousel, and a vertical Japanese carousel.

  3. Writing-mode overflow lab

    Pick a writing-mode + direction + overflow values and watch the resolved physical axes update in real time. Shows exactly how overflow-block maps onto overflow-y vs overflow-x for every combination.

  4. i18n Scroll Demo

    Side-by-side comparison of overflow-inline vs overflow-x across horizontal LTR, horizontal RTL, and vertical-rl writing modes. Physical properties break in vertical mode; logical properties follow the text flow.

  5. Bidi chat

    A two-panel chat — left panel in English (LTR), right in Arabic (RTL). Both use overflow-block: auto; overflow-inline: hidden. The logical properties automatically scroll the block axis and clip inline in each respective direction. Type messages into either panel to try it live.

why it shipped

Without the logical variants of overflow the author needs to know whether the writing-mode is horizontal or vertical and set overflow-x or overflow-y based on that knowledge. The logical variants lets the author make the overflow directions respond to the writing-mode.

references