CSS Overflow Property: A Comprehensive Tutorial

CSS overflow property controls how content flows outside of a container. This includes text that wraps around images, buttons that wrap around other elements, and even entire pages that flow over multiple containers.

You may have heard about the overflow property before but did you know there are four different ways to use it? Read on to discover them!

CSS Overflow Property

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

The overflow property has the following values:

visible – Default. The overflow is not clipped. The content renders outside the element’s box
hidden – The overflow is clipped, and the rest of the content will be invisible
scroll – The overflow is clipped, and a scrollbar is added to see the rest of the content
auto – Similar to scroll, but it adds scrollbars only when necessary

Create Scroll Bars with the CSS Overflow Property

In order to make an element scroll, we need to add some properties to it. One of these properties is the overflow property. The overflow property lets us set whether the content inside the element will overflow out of the box (or container) or not. If we set the value as visible, then the content will overflow out of the container.

#container {
    width: 100%;
    height: 200px;
    overflow: scroll | visible | auto;
}

To only show the vertical scrollbar, or only the horizontal scrollbar, use overflow-y or overflow-x:

#container {
    width: 100%;
    height: 200px;
    overflow-y: scroll;
    overflow-x: scroll;
}

Hide Content with the CSS Overflow Property (and Show it Again)

Let’s say we have a div called #container. We also have a paragraph inside of it called #content. Now let’s say we want to hide the content inside the container. When we set the value as hidden, then the content won’t overflow the container. To do so, we would use the following code:

#container {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

Working Demo

overflow: visible

See the Pen CSS Overflow by Vimalraj (@w3tweaks) on CodePen.

CSS Overflow Property: A Comprehensive Tutorial