CSS Overflow

The CSS overflow property is applied on block level elements, usually on div containers. It manages the extra content that gets overflowed from the container if there is not enough space.

you have a div container of fixed height and width with some content inside it. The content is bigger than the available space in the container and it is coming out of the div. You cannot increase the height or width of the container because it will disturb the website's layout. Now in this situation, when you cannot alter the parent element's dimensions to contain the data, CSS Overflow property is used.

CSS Overflow Properties

The overflow properties gives different options to manage the content overflow. You can choose any one of them for a container as per requirements:

Value Description
visible THe content overflow is visible to the user. It is the default value.
hidden It hides the overflowed content.
scroll It adds a scroll bar in the container.
auto It adds a scroll bar in the container only if overflow is detected.

Note: The overflow property only works for block elements with fixed dimensions. If the dimensions are not fixed then the container can take as much space as needed by the content.


CSS Overflow Visible

CSS Overflow Visible property is the default one. It is automatically applied by the browser when overflow is detected. The Overlow visible property doesn't help at all, it makes the content overflow visible to the user. It means that, it doesn't clip the overflowed content. Let's see an example of overflow:visible


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Overflow Visible </title>
<meta charset="UTF-8">
<style>
div {
background-color: #eee;
width: 200px;
height: 75px;
border: 1px dotted black;
overflow: visible;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<div>You can use the overflow property when you want to have better control of the layout.
The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>

Output

CSS Overflow Visible
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

In the output above, you can see that the overflowed content is visible outside the dimensions of the container. As overflow:visible is the default property, even if you don't apply it, the output will be same.


CSS Overflow Hidden

The Overflow Hidden property hides the overflowed content. If the content goes outside the dimensions of the container then it gets clipped and hidden.

Using Overflow Hidden can result in loss of information. As the overflowed content is clipped, users can only read the visible part of the content that is inside the container. They cannot access or read whatever is hidden due to overflow.

Let's look at the example of overflow:hidden:


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Overflow Hidden </title>
<meta charset="UTF-8">
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: hidden;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>With the hidden value, the overflow is clipped, and the rest of the content is hidden:</p>
<div>You can use the overflow property when you want to have better control of the layout.
The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>

Output

CSS Overflow Hidden
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

As you can see in the output, the overflowed text is hidden. Whatever the container is not able to contain, gets hidden. But, as discussed above, the problem of loss of information is there. It can be avoided by using the next property.


CSS Overflow Scroll

CSS overflow scroll adds scroll bars in the container. It sets a scroll bar inside the box. The scroll bar will always be visible even when there is no overflow.

The problem with overflow:scroll is that the scroll bars will always be visible. It doesn't look good, if you don't have content overflow then the scroll bars should be hidden. This shortcoming gets solved in overflow:auto, but first look at the example of overflow scroll.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Overflow Scroll </title>
<meta charset="UTF-8">
<style>
div {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: scroll;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<div>You can use the overflow property when you want to have better control of the layout.
The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>

Output

CSS Overflow Scroll
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

CSS Overflow Auto

CSS overflow auto is an improvement over overflow:scroll. In this property, the scroll bars will only be visible inside the container if there is an overflow. If no overflow is detected the the sidebars are hidden. Look at the example below to understand how it works:


<!DOCTYPE html> <html> <head> <style> .ex1 { background-color: lightblue; width: 165px; height: 120px; overflow: auto; } .ex2 { background-color: lightblue; width: 165px; height: 150px; overflow: auto; } </style> </head> <body> <h1>The overflow Property</h1> <h2>overflow: auto with Scroll Bar</h2> <div class="ex1">As you can see in the example above, the same overflow:auto is applied to both the divs. Only that div has the scroll bars visible that contain overflow.</div> <h2>overflow: auto with no Scroll Bar</h2> <div class="ex2">The other div has no scroll bars because the content fits inside the container.</div> </body> </html>

Output

The overflow Property

overflow: auto with Scroll Bar

As you can see in the example above, the same overflow:auto is applied to both the divs. Only that div has the scroll bars visible that contain overflow.

overflow: auto with no Scroll Bar

The other div has no scroll bars because the content fits inside the container.

As you can see in the example above, the same overflow:auto is applied to both the divs. Only that div has the scroll bars visible that contain overflow. The other div has no scroll bars because the content fits inside the container.


Overflow-x and Overflow-y

The overflow-x and overflow-y properties manages the horizontal and vertical axis' overflow respectively.

If you only want to manage the horizontal overflow then use overflow-x and for vertical overflow use overflow-y. All the above values visible, hidden, auto and scroll can be used with both the properties.


<!DOCTYPE html> <html> <head> <style> div.ex1 { background-color: lightblue; width: 50px; overflow-x: scroll; } div.ex2 { background-color: lightblue; width: 50px; overflow-x: hidden; } div.ex3 { background-color: lightblue; width: 50px; overflow-x: auto; } div.ex4 { background-color: lightblue; width: 50px; overflow-x: visible; } </style> </head> <body> <h1>The overflow-x Property</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h2>overflow-x: scroll:</h2> <div class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <h2>overflow-x: hidden:</h2> <div class="ex2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <h2>overflow-x: auto:</h2> <div class="ex3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <h2>overflow-x: visible (default):</h2> <div class="ex4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </body> </html>

Note: The overflow property manages both the horizontal and vertical overflow. In all the example we have given, we only used text as overflowed content. You should remember that text only overflows in the vertical axis, that's why only vertical scroll bar is visible in the examples above.