CSS Overflow Property

In this tutorial, we will know about CSS overflow with the help of various examples. If you do not explicitly set the height of a display box by using height property, the browser will automatically calculate the height to take up enough space for all the content.

But what happens if you set a height property that does not allow enough space for all the content? It creates a situation called overflow.

This not only occurs with the min-height and max-height properties, but also with min-width and max-width properties, as well as due to other factors such as padding, margins, and borders.

Let’s take an example in which we have designed an internal style sheet to create overflow.

Example:

<!DOCTYPE html>
<html>
<head>
     <title>overflow Example</title>
<style>
div {
   width: 200px;
   height: 100px;
   border: 1px solid black;
}
</style>
</head>
<body>
   <div>
      Sometimes, the content of an element's box will go over the dimension of its box. This can happen due to the number of reasons, including the content being larger than a box, or a box with negative margins. In such cases, we need to manage overflow by using overflow property.
   </div>
</body>
</html>

Output:

As you can see in the above output, the text content simply spills out from the bottom of the box because there’s not enough room to fit all the contents. This is the default behavior for overflow that mainly occurs when the content exceeds the dimensions of the element box.

It can occur with fixed dimensions, min/max dimensions, and because of additional spacing properties like padding, margins, and borders. To overcome this situation, CSS provides several ways to handle this overflow. Let’s understand it.

The overflow property is non-inherited property in CSS specifying what to do with the content that overflows the borders of an element’s box. This property can take any one of the following values:

visible
hidden
scroll
auto
inherit

Let’s understand the CSS overflow property with these values and their effects on an element’s content.

CSS overflow: visible

If you set the overflow property with the visible value, it will not clip the overflow content and the overflowing content spills out of the box. In other words, the rendered content will overflow outside the element’s box if the content is too large and does not fit inside the box.

However, this is the default value for the overflow property in CSS. It means that if you do not explicitly set the overflow property, the content that exceeds the dimensions of the element’s box will be rendered outside the box without being clipped or hidden.

Example 2:

<!DOCTYPE html>
<html>
<head>
     <title>overflow: visible Example</title>
<style>
div {
   width: 200px;
   height: 100px;
   border: 1px solid black;
   overflow: visible;
}
</style>
</head>
<body>
   <div>
      Sometimes, the content of an element's box will go over the dimension of its box. This can happen due to the number of reasons, including the content being larger than a box, or a box with negative margins. In such cases, we need to manage overflow by using overflow property.
   </div>
</body>
</html>

In this example, we have set the overflow property with the visible value. Therefore, the overflowing content will display outside the defined width and height of the box.

CSS overflow: hidden

If you set the overflow property with the value hidden, it clips the overflowing content and does not display. In other words, the hidden value clips the overflow content and makes the rest of the content invisible or unavailable. Let’s take an example on it.

Example 3:

<!DOCTYPE html>
<html>
<head>
    <title>overflow: hidden Example</title>
<style>
div {
   width: 200px;
   height: 100px;
   border: 1px solid black;
   overflow: hidden;
}
</style>
</head>
<body>
   <div>
      The content of this element's box is gone over the dimension of the box and is not visible because we have set the overflow property with the hidden value.
   </div>
</body>
</html>

Output:

In this example, we have set the overflow property with the hidden value. Therefore, the overflowed content is clipped and not visible outside the box.

overflow: scroll

When you set the overflow property with the scroll value, this value clips overflow and provides a scrollbar to scroll to the rest of the overflowing content. The scrollbar appears at the edges of the display box that allows the users to access all the overflowing contents. Let’s take an example based on it.

Example 4:

<!DOCTYPE html>
<html>
<head>
    <title>overflow: scroll Example</title>
<style>
div {
   width: 250px;
   height: 100px;
   border: 1px solid black;
   overflow: scroll;
}
</style>
</head>
<body>
   <div>
      The content of this element's box is gone over the dimension of the box. Therefore, we have set the overflow property with scroll value that provides a vertical scrollbar to see the overflowing content.
   </div>
</body>
</html>

Output:

In this example, we have set the CSS overflow property with the scroll value that provides a scroll bar to see the rest of the overflowing content.

overflow: auto

The overflow property with the auto value adds a scrollbar only when the content is overflowing from the element’s box. Here, the web browser determines what to do with overflowing content. It chooses either scroll or visible to show the rest of content.

Example 5:

<!DOCTYPE html>
<html>
<head>
    <title>overflow: auto Example</title>
<style>
div {
   width: 250px;
   height: 100px;
   border: 1px solid black;
   overflow: auto;
}
</style>
</head>
<body>
   <div>
      The content of this element's box is gone over the size of the box. Therefore, we have set the overflow property with auto value. The browser adds a vertical scrollbar to see the overflowing content.
   </div>
</body>
</html>

Output:

In this example, we have set the overflow property with the auto value in the CSS style rule. Therefore, the browser automatically adds a vertical scrollbar at the edge of the display box to see the overflowing content.

CSS overflow: inherit

When you set the overflow property with inherit value in CSS style rule, the overflow behavior of an element will be inherited from its parent element. In other words, it will use the value of overflow set on the containing box. This is useful when you want to maintain consistent overflow behavior across nested elements. Let’s take an example based on it.

Example 6:

<!DOCTYPE html>
<html>
<head>
    <title>Overflow Inherit Example</title>
<style>
.parent {
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll; /* Setting overflow for the parent element */
}
.child {
    overflow: inherit; /* Inheriting overflow behavior from the parent element */
    width: 250px;
    height: 150px;
    background-color: lightgray;
}
</style>
</head>
<body>
   <div class="parent">
      <div class="child">
           This is the child element whose overflow behavior is inherited from its parent element. Since the parent element has an overflow setting of 'scroll', the child element will also exhibit the same overflow behavior.
      </div>
   </div>
</body>
</html>

Output:

In this example, we have defined a parent element whose width and height are 200px and 100px, respectively. Then, we have set the overflow property with the scroll value, which means that if the content overflows, scroll bars will appear. There is also a child element whose dimensions are larger than the parent element to ensure overflow.

In the child element, we have set the overflow property with the inherit value, which means it will inherit the overflow behavior from its parent element. Since the parent element has overflow: scroll;, the child element will also have the same overflow behavior.

In this tutorial, you have learned how to handle overflow in CSS when the content exceeds the dimensions of the element’s box. We have covered all the examples based on the overflow property and its various values, such as auto, visible, inherit, scroll, and hidden. I hope that you will have understood the basic points of CSS overflow property and practiced all examples.