html

CSS Overflow Property | Explained

While developing websites we often come across situations where the content present in certain HTML elements overflow. You can choose what to do with the overflowing content using the CSS overflow property. This post is designed to enlighten its readers about the details of the overflow property in CSS.

This tutorial covers.

  1. Overflow Property
  2. Visible Value
  3. Hidden Value
  4. Auto Value
  5. Overflow-x and Overflow-y

Let’s begin.

Overflow Property

The overflow property controls the behavior of the content that overflows the specified area of an element, moreover, the overflow property is designed for block-level elements only.

Like other CSS properties, the overflow property also exhibits certain values which are explained in depth below.

Visible Value

This is a default value of the overflow property. Suppose if your content is placed inside a box and is overflowing then this value will display the content exceeding the box area. Furthermore, the content that is being displayed outside the box boundary will not disturb the alignment of other surrounding elements.

Here is an example of this value.

HTML

<body>

<div class="div1">While developing websites we often come across situations where the content present in certain HTML elements overflow. You can choose what to do with the overflowing content using the CSS overflow property.</div>

</body>

CSS

<style>

.div1{

  overflow: visible;

  background-color: pink;

  width: 100px;

  height: 145px;

  border: 2px solid black;

}

</style>

Output

Moving on to the next value.

Hidden Value

The hidden value of the overflow property hides all the content that is exceeding the box area. This property should be handled with care because the content that this property hide is completely invisible to the user, however, it is best suited for displaying content that is dynamic in nature. Below is an example of the hidden value.

<style>

.div1{

  overflow: hidden;

  background-color: pink;

  width: 100px;

  height: 145px;

  border: 2px solid black;

}

</style>

Output

The content exceeding the box area has been hidden.

Scroll Value

This value hides the content that exceeds the box area inside the box and provides both vertical and horizontal scroll bars to view the content. Here is an example.

<style>

.div1{

  overflow: scroll;

  background-color: pink;

  width: 150px;

  height: 145px;

  border: 2px solid black;

}

</style>

Output

The scroll bars have been added.

Auto Value

This value has a similar function as the scroll value, however, what make it different from the scroll value is that it adds scroll bars to the box only when content is exceeding the box area. Moreover, it will add only the type of scroll bar which is required. Here is an example.

<style>

.div1{

  overflow: auto;

  background-color: pink;

  width: 150px;

  height: 145px;

  border: 2px solid black;

}

</style>

Output

The auto value of overflow property successfully applied.

Overflow-x and Overflow-y

These are further two properties that control what happens to the overflowing content either horizontally or vertically. The overflow-x property control the horizontal behavior of the content while the overflow-y property determines the vertical behavior of the content. Here is an example.

<style>

.div1{

  overflow-x: scroll;

  overflow-y: hidden;

  width: 150px;

  height: 100px;

  border: 2px solid black;

}

</style>

In the above example, the overflow-x property has been assigned scroll value and overflow-y has been assigned hidden value as a result the content exceeding the box area will be hidden and the box will have a vertical scroll bar.

Output

Conclusion

The overflow property is used to control the behavior of the content that overflows the specified area of an element, moreover, the overflow property is designed for block-level elements only. The overflow property renders four values which are; visible, scroll, hidden and auto. There are further two properties that control what happens to the overflowing content either horizontally or vertically which are; overflow-x and overflow-y. This post discusses the overflow property in depth with the help of suitable examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.