overflow
Decides what happens to content that doesn’t fit in an element.
- Initial value
visible- Inherited
- No
- Animatable
- no
- Applies to
- block containers, flex containers, and grid containers
- JavaScript
element.style.overflow = "auto"
Example
#.table-wrapper {
overflow-x: auto;
}<div class="table-wrapper stage">
<table style="min-width: 520px; border-collapse: collapse;">
<tr><th align="left">Course</th><th align="left">Modules</th><th align="left">Tasks</th><th align="left">Level</th></tr>
<tr><td>HTML and CSS</td><td>11</td><td>738</td><td>Beginner</td></tr>
</table>
</div>Definition and usage
#The overflow property controls the behavior of content that extends past an element’s dimensions. By default (visible) it spills outside. You can also clip it, always show scrollbars, or show them only when needed.
It’s shorthand for overflow-x and overflow-y. Giving two values sets the horizontal and vertical axes separately, for example horizontal-only scrolling for a wide table.
Values other than visible and clip create a new scroll container. That has side effects: for example, an ancestor with overflow: hidden disables position: sticky on its descendants.
Syntax
#overflow: visible | hidden | clip | scroll | auto (1-2 values);Values
#- The content spills outside the element.
- The overflow is clipped, but it can still be scrolled with a script.
- A scrollbar appears only when the content doesn’t fit.
- Scrollbars are always visible (depending on the system).
- Clips without creating a scroll container, so it doesn’t break
position: sticky.
Values in practice
#visible
.demo { overflow: visible; }auto
.demo { overflow: auto; }scroll
.demo { overflow: scroll; }clip
position: sticky..demo { overflow: clip; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Wrap wide tables on phones in an element with
overflow-x: auto, instead of squeezing the columns. - If
position: stickystopped working, look for an ancestor withoverflow: hiddenand switch it tooverflow: clip.
Related entries
#- max-heightSets the maximum height of an element.
- text-overflowDecides how to mark text truncated at the end of a line, for example with an ellipsis.
- positionChooses how an element is positioned: in the flow, relative, absolute, fixed, or sticky.
- overflow-xDecides what happens to content overflowing horizontally. Its twin overflow-y does the same vertically.
Spotted a mistake or missing an example? Write to us.