Text longer than expected, an image bigger than its box, a comment list that keeps growing without end: a page's content does not always respect the dimensions it has been given. overflow decides what happens the day that spillover occurs.
It is a property found on almost every component with a limited height: a card, a chat window, a modal, a dropdown menu too tall for the screen.
Definition
overflow manages how content spills out relative to the dimensions of its box, as defined by the Box model. It takes five main values: visible (the default, content overflows freely), hidden (the overflow is clipped), scroll, auto, and the newest one, clip.
The five values, one by one
| Value | Content clipped | Scrollbar |
|---|---|---|
visible | No | Never |
hidden | Yes | Never, even via keyboard or script |
scroll | Yes | Always shown, even when not needed |
auto | Yes | Only when content actually overflows |
clip | Yes | Never, and scrolling stays impossible even via script |
auto is by far the most commonly used value in practice: it avoids the downside of scroll, which shows a bar even on content that comfortably fits its box, while keeping content reachable the moment it exceeds its bounds.
overflow-x and overflow-y: one axis at a time
overflow is actually a shorthand for two separate properties, overflow-x and overflow-y, which control each axis independently.
.chat-thread {
overflow-y: auto;
overflow-x: hidden;
max-height: 400px;
}This combination, very common on a chat window, allows vertical scrolling once the conversation exceeds 400 pixels in height, while preventing any accidental horizontal overflow, for example caused by a long word or a URL with no spaces.
The side effect on position: sticky
A position: sticky element stops working the moment one of its ancestors, anywhere between itself and its scrolling area, carries an overflow set to hidden, scroll, or auto. That parent becomes the browser's new scrolling reference, often without anyone intending it, and the sticky element then behaves like a plain static one.
Another common use: clipping decorative overflow
overflow: hidden is not only for managing content that runs too long: it is also the simplest way to apply a border-radius to an image that would otherwise keep showing its square corners over the container's rounded edge. The same trick cleanly clips a decorative gradient or a shadow that would otherwise spill out of a rounded card.
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
}Without that last line, the image placed inside .avatar would stay square despite the rounding applied to the container around it, a common trap for anyone new to clipping images with CSS.
Frequently asked questions
What is the difference between overflow: hidden and overflow: clip?
Both visually clip content that spills out, but hidden still allows programmatic scrolling, for example through JavaScript or by giving keyboard focus to an inner element. clip forbids scrolling entirely, even that way, which makes it slightly more performant but also stricter.
Why did my sticky element stop locking in place after a harmless change?
The most common cause is the addition, sometimes indirect, of an overflow other than visible on a parent, often to fix an entirely different problem such as a clipped box-shadow or a rounded corner. This seemingly unrelated change silently breaks a sticky effect further down the tree.
How can a scrollbar be hidden while keeping scrolling active?
overflow alone does not allow this: auto and scroll always show a bar depending on the operating system. Hiding it requires targeting the bar's appearance with browser-specific properties, while keeping in mind that a fully invisible bar can confuse a user who no longer realises the content can be scrolled.