The CSS overflow
property specifies the way an element’s content overflows or grows out of its parent container. Overflows can occur in both the x and y directions of an element when the width or height of an element is bigger than its enclosing parent element.
Jump ahead:
- Values
overflow
properties- Using both
overflow-x
andoverflow-y
Say we have a parent div
element of width 300px and height 700px, and a child element of width 500px and height 900px. We will see that the child div
element overflows its parent element in both the x and y directions.
.parentEl { width: 300px; height: 700px; border: 1px solid orangered; } .childEl { width: 500px; height: 900px; border: 1px solid black; }
Review a live example below:
See the Pen
css overflow by Chidume David (@philipsz-davido)
on CodePen.
.childEl
will overflow both the x- and y-axes by 200px.
Values
The overflow
property has values it can use to handle the situation above: visible
, hidden
, auto
, scroll
, and clip
.
visible
The default value of overflow
. This value makes the overflow visible. It will not clip any of the overflows.
.parentEl { width: 300px; height: 700px; border: 1px solid orangered; } .childEl { width: 500px; height: 900px; border: 1px solid black; overflow: visible; }
The overflowing content of .childEl
will not be clipped.
hidden
This value clips or hides the overflowing area/content of the child element.
.parentEl { width: 300px; height: 700px; border: 1px solid orangered; } .childEl { width: 500px; height: 900px; border: 1px solid black; overflow: hidden; }
The overflowing content of .childEl
above will be hidden.
auto
This hides and provides scrollbars to overflowing content in the element. The scroll bars appear once the content overflows.
.parentEl { width: 300px; height: 700px; border: 1px solid orangered; } .childEl { width: 500px; height: 900px; border: 1px solid black; overflow: auto; }
Scroll bars will appear on .childEl.
If we set the width not to overflow its parent:
... .childEl { width: 200px; ... overflow: auto; }
Then, the scroll bar will not appear on the bottom because nothing is overflowing there. Scroll bars will only be visible on the right side.
scroll
This hides or clips the overflowing content but provide scroll bars so the overflowing can be scrolled to make them visible or to see the rest of the content. Scroll bars automatically appear in the element even if the content does not overflow.
.parentEl { width: 300px; height: 700px; border: 1px solid orangered; } .childEl { width: 500px; height: 900px; border: 1px solid black; overflow: scroll; }
The overflowing content of .childEl
will be hidden and scroll bars will appear on its right and bottom. Using a mouse or keys we can scroll to reveal the overflowed content.
clip
Similar to hidden
, with the exception that the overflowing content with hidden
can be scrolled programmatically. Not so with clip
, which forbids all scrolling.
.parentEl { width: 300px; height: 700px; border: 1px solid orangered; } .childEl { width: 500px; height: 900px; border: 1px solid black; overflow: clip; }
The overflowing content of .childEl
will be hidden and cannot be scrolled to using JS.
N.B.,
overflow: clip;
is still experimental at the time of writing and remains unsupported by most major browsers.
overflow
properties
overflow
is a shorthand for overflow-x
and overflow-y
, which means that when we use overflow
, we are setting both the overflow-x
and overflow-y
properties.
overflow
can have one or two values. If it has only one value, then overflow-x
and overflow-y
both take the value.
If we had overflow: auto;
, it would be equal to:
overflow-x: auto; overflow-y: auto;
If there are two values, the first value becomes overflow-x
and the second value is overflow-y
.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
If we had overflow: auto hidden;
, it would be equal to:
overflow-x: auto; overflow-y: hidden;
overflow-x
This targets the left and right sides of the element and controls how the overflowing content is handled.
.parentEl { width: 300px; height: 700px; border: 1px solid orangered; } .childEl { width: 500px; height: 900px; border: 1px solid black; overflow-x: hidden; }
The example above will hide the overflowing content of .childEl
on the right side. The overflowing content of its bottom portion is not affected by the rule.
.parentEl { width: 300px; height: 700px; border: 1px solid orangered; } .childEl { width: 500px; height: 900px; border: 1px solid black; overflow-x: scroll; }
The example above will add a scroll bar only to the right side of .childEl
overflow-y
This targets the top and bottom portions of the element and controls how the overflowing content is handled.
.parentEl { width: 300px; height: 700px; border: 1px solid orangered; } .childEl { width: 500px; height: 900px; border: 1px solid black; overflow-y: hidden; }
This will only hide the overflowing bottom portion of .childEl
Using both overflow-x
and overflow-y
Both properties can be used together to affect the top and bottom portions of the content.
.parentEl { width: 300px; height: 700px; border: 1px solid orangered; } .childEl { width: 500px; height: 900px; border: 1px solid black; overflow-x: hidden; overflow-y: scroll; }
This hides the overflowing right side and adds a scroll bar to the bottom portion of .childEl
.
Is your frontend hogging your users' CPU?
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — Start monitoring for free.