demo · v135

One carousel, three writing modes

The same overflow-inline: auto rule produces a horizontal carousel in English, a right-to-left carousel in Arabic, and a vertical carousel in Japanese. With the old overflow-x/y, you needed media-style branches or scripted swaps. Switch the language toggle and watch the same stylesheet do the right thing.

overflow-inline: ? 

    
Try the same demo with overflow-x: auto instead and the Japanese vertical layout breaks — the scroller never appears because the overflow is in the block direction, not the inline one.

  


  

    
the code


.cards {
  display: flex;
  gap: 1rem;
  overflow-inline: auto;   /* follows writing-mode */
  overflow-block: hidden;
}

  


  

    
see also