overflow-x
Controls only horizontal overflow. Commonly used for horizontally scrollable containers such as carousels and wide tables.
Class List
| Class | CSS | Description |
|---|---|---|
oxv | overflow-x: visible | default; overflowing content is visible as-is |
oxh | overflow-x: hidden | clips and hides overflowing content |
oxs | overflow-x: scroll | always shows horizontal scrollbar |
oxa | overflow-x: auto | shows horizontal scrollbar only when overflowing |
oxc | overflow-x: clip | clips content without creating a scroll area |
Visual Comparison
Compares the behavior of each value when wide content exceeds the container.
Visible — oxv
content overflows outside the container
Hidden — oxh
overflowing portion is clipped and hidden
Auto — oxa
horizontal scrollbar appears only when overflowing
Scroll — oxs
horizontal scrollbar is always displayed
Live Scroll Demo
The card strip below is wider than its container. Scroll sideways with the wheel or trackpad: a horizontal scrollbar appears and the cards move.
oxa — oxa df gap16px
Without fs0 (flex-shrink: 0) on the children the cards would shrink and no scrolling would ever happen. This is the single most common mistake when building a horizontal strip.
Per-class Detail
oxvoverflow-x: visible
The default. Overflowing content is painted outside the container instead of being clipped, and no scroll container is created.
When to use
Leave it as-is when tooltips, dropdowns, or shadows have to escape the parent. Set it explicitly to undo clipping applied elsewhere.
<!-- Dropdown that must escape its narrow parent -->
<div class="oxv pr">
<button class="py8px px16px bg18181B cFAFAFA br8px bn cp">Filter</button>
<ul class="pa t100p l0 w28rem bg0F0F17 b1pxsolid27272A br8px p12px">
<li class="py8px fs14px cA1A1AA">Wider than the button</li>
</ul>
</div>oxhoverflow-x: hidden
Clips overflowing horizontal content and shows no scrollbar. The element still becomes a scroll container, so scrollLeft can still be moved from JavaScript.
When to use
Use it to stop decorative backgrounds or animated elements from sticking out sideways and creating a page-level horizontal scrollbar.
<!-- Clip a decorative element that sticks out sideways -->
<section class="oxh pr w100p h30rem bg0F0F17 br12px">
<div class="pa t0 l0 w120rem h30rem bg99-102-241-20"></div>
<h2 class="pr fs3-2rem fw700 cFAFAFA p2rem">Hero</h2>
</section>oxsoverflow-x: scroll
Always reserves room for a horizontal scrollbar, whether or not the content overflows.
When to use
Use it when you do not want the layout to shift as a scrollbar appears and disappears. The permanently visible scrollbar also advertises that there is more to see sideways.
<!-- Timeline where the scrollbar must always be visible -->
<div class="oxs w100p pb12px">
<div class="df gap16px minw60rem">
<div class="fs0 w20rem h8rem bg18181B br8px"></div>
<div class="fs0 w20rem h8rem bg18181B br8px"></div>
<div class="fs0 w20rem h8rem bg18181B br8px"></div>
</div>
</div>oxaoverflow-x: auto
Shows a horizontal scrollbar only when the content overflows. When it does not, the element looks like visible.
When to use
The default choice for almost every horizontal scroll area: carousels, wide tables, tab strips.
<!-- Card strip: scrollbar only appears when it is needed -->
<div class="oxa df gap16px pb12px">
<div class="fs0 w20rem h8rem bg6366F1 br8px"></div>
<div class="fs0 w20rem h8rem bg6366F1 br8px"></div>
<div class="fs0 w20rem h8rem bg6366F1 br8px"></div>
</div>oxcoverflow-x: clip
Clips like hidden, but without creating a scroll container, so it cannot be scrolled even from JavaScript.
When to use
Use it when you only need clipping and never scrolling. Because no scroll container is created, position sticky elements inside keep working. Support is narrower than hidden, though.
<!-- Clip without turning the element into a scroll container -->
<div class="oxc pr w100p h20rem br8px bg0F0F17">
<div class="pa t0 l0 w120rem h20rem bg99-102-241-20"></div>
</div>Usage Examples
The basic form for wide tables and card carousels.
<!-- Horizontally scrollable table -->
<div class="oxa">
<table class="minw60rem">
<tr><td>Wide table content...</td></tr>
</table>
</div>
<!-- Horizontal scroll card carousel -->
<div class="oxa df gap16px pb12px">
<div class="minw28rem bg18181B p2rem br8px fs0">Card 1</div>
<div class="minw28rem bg18181B p2rem br8px fs0">Card 2</div>
<div class="minw28rem bg18181B p2rem br8px fs0">Card 3</div>
</div>
<!-- Overflow prevention (code block) -->
<div class="oxh maxw100p">
<pre>A very long line of code...</pre>
</div>A report table that scrolls both horizontally and vertically. The header row is pinned with position sticky, and obxc keeps the horizontal scroll from propagating to the page.
<!-- Wide report table with a sticky header row -->
<div class="oxa obxc w100p maxh50vh oya b1pxsolid27272A br8px">
<table class="minw60rem w100p bcc fs14px">
<thead>
<tr>
<th class="ps t0 tal py12px px16px bg18181B cA1A1AA wsn">Region</th>
<th class="ps t0 tal py12px px16px bg18181B cA1A1AA wsn">Owner</th>
<th class="ps t0 tal py12px px16px bg18181B cA1A1AA wsn">Pipeline</th>
<th class="ps t0 tal py12px px16px bg18181B cA1A1AA wsn">Closed won</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py12px px16px bb1pxsolid27272A wsn">APAC</td>
<td class="py12px px16px bb1pxsolid27272A wsn">Kim</td>
<td class="py12px px16px bb1pxsolid27272A wsn">120,000</td>
<td class="py12px px16px bb1pxsolid27272A wsn">48,000</td>
</tr>
</tbody>
</table>
</div>Tips & Notes
Setting one axis turns the other into auto
If either overflow-x or overflow-y is set to something other than visible, the browser computes visible on the other axis as auto. So setting only oxh can produce a vertical scrollbar. Avoid a height limit if you do not want vertical clipping.
oxh on body breaks position sticky
Putting oxh on html or body to hide a horizontal scrollbar very often stops position sticky elements inside from working. Find the element that actually sticks out and clip that one, or use oxc, which does not create a scroll container.
Flex children must not shrink
Children of a df container shrink by default. Without fs0 or a minimum width the content is squeezed and no horizontal scrolling appears.
Clipping and accessibility
Content hidden by oxh is only invisible, not removed from the document. If keyboard focus moves into the clipped area, the user is lost. If the hidden content is interactive, remove it instead of clipping it.