overflow
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.
overflow
properties
overflow-x
and overflow-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.
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
propertiesoverflow
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
.
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
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
.
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.
Knowing how to reduce unused JavaScript can help you save time, optimize performance, and improve efficiency.
MiniSim makes virtual emulator testing easy — learn how to use it to test both Android and iOS apps on macOS in this detailed post.
After internationalization, you can further localize your apps to make user experiences more friendly. Learn how to do this in TypeScript.
You can leverage containers to streamline the process of setting up a dev environment. Let’s see how using VS Code and Docker.