overflow-x
Decides what happens to content overflowing horizontally. Its twin overflow-y does the same vertically.
- Initial value
visible- Inherited
- No
- Animatable
- no
- Applies to
- block containers, flex containers, and grid containers
- JavaScript
element.style.overflowX = "auto"
Example
#.chips {
display: flex;
gap: 8px;
overflow-x: auto;
padding-block-end: 8px;
}
.chips button {
flex: none;
}<style>
.chips button { padding: 6px 14px; border: 1px solid #3f3f46; border-radius: 999px; background: #18181b; color: inherit; font: inherit; }
.chips button:first-child { border-color: #7c3aed; background: #2e1065; }
</style>
<p style="margin: 0 0 8px">Filter courses</p>
<div class="chips">
<button type="button">All</button>
<button type="button">HTML</button>
<button type="button">CSS</button>
<button type="button">JavaScript</button>
<button type="button">TypeScript</button>
<button type="button">Python</button>
<button type="button">React</button>
<button type="button">Next.js</button>
<button type="button">NestJS</button>
</div>On a narrow screen, the buttons don’t wrap to a new line, they scroll horizontally instead. flex: none keeps them from shrinking, and padding-block-end keeps the scrollbar clear of the buttons.
Definition and usage
#The overflow-x property controls what happens to content that doesn’t fit an element’s width: it spills out, gets clipped, or becomes scrollable. Its twin, overflow-y, works the same way, just vertically. Both accept the same values as the overflow shorthand, which sets them at once.
Separate axes are useful when scrolling should only work in one direction. A horizontal filter bar on a phone, a wide table, or long lines of code get overflow-x: auto, while a sidebar or chat window that scrolls downward gets overflow-y: auto.
The axes aren’t fully independent though, and this rule catches almost everyone off guard. If one axis scrolls or clips with scrolling (hidden, scroll, auto), then visible on the other axis turns into auto, and clip turns into hidden. So you can’t scroll horizontally while still letting something overflow vertically. The exception is clip, which doesn’t force this swap.
Values other than visible and clip create a scroll container. That’s why overflow-x: hidden on an ancestor can break position: sticky. If you only want to clip the overflow, without scrolling, choose clip.
Syntax
#overflow-x: visible | hidden | clip | scroll | auto;
overflow-y: visible | hidden | clip | scroll | auto;Values
#- The card strip overflows the frame on the right, and the badge above the first card overflows at the top. This is the default value.
- The overflow is clipped at the frame’s edge, with no scrollbar. Note that the badge is clipped too: the vertical axis switched from
visibletoauto. - A horizontal scrollbar appears only when the content doesn’t fit. The most common choice, but the badge still gets clipped.
- Room for a scrollbar is reserved always, even when the content fits. On systems that hide scrollbars (e.g. macOS), it looks like
auto. - Clips the horizontal overflow without creating a scroll container. The vertical axis can stay
visible, so the badge overflows in full. vertical axis
The same logic vertically. The list has a fixed height, and the overflow scrolls downward.
Values in practice
#visible
.demo { overflow-x: visible; }auto
.demo { overflow-x: auto; }scroll
auto..demo { overflow-x: scroll; }clip
visible, so the badge overflows in full..demo { overflow-x: clip; }overflow-y: auto
.demo { overflow-y: auto; }More examples
#pre {
overflow-x: auto;
padding: 12px 16px;
border-radius: 10px;
background: #18181b;
}<pre><code>const message = 'Flexbox module complete! You earn 150 experience points and a badge for a 7-day streak.'</code></pre>A code block doesn’t wrap its lines, so without overflow-x: auto a long line would stretch the page layout. With this declaration, only the block itself scrolls.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- A card or filter strip on a phone is
display: flexwithoverflow-x: autoon the parent andflex: noneon the children. - A horizontal scrollbar on the whole page is better fixed at the source, by finding the element that’s too wide. If you must hide it, use
overflow-x: clipinstead ofhidden, so you don’t breakposition: sticky. - Don’t try to combine scrolling on one axis with
visibleon the other. Move an overflowing menu or tooltip outside the scrolling element instead.
Related entries
#Spotted a mistake or missing an example? Write to us.