CSS OVERFLOW

When the content of an element overflows (doesn't fit) the element's box, the overflow property determines what happens.

Managing Overflowing Content

It's probable that the content of an element would be larger than the dimensions of the box itself. For example, the element's width and height properties did not provide enough space to fit the element's material.

The CSS overflow property allows you to decide whether content should be clipped, scroll bars should be made, or overflow content should be displayed for a block-level feature.

The following values are available for this property: visible (default), secret, scroll, and auto. CSS3 also contains the overflow-x and overflow-y properties, which allow for vertical and horizontal clipping to be managed separately.

Overflow Visible

By default, it is visible. It will not get clipped, and will jump out of the box if the height/width of the box is smaller. Let's have a look:

div {
  width: 250px;
  height:80px;
  overflow:visible;
  background-color: rgb(220,220,220);
}

Output:

Overflow Hidden

Having the overflow value as hidden, the overflow gets clipped. Everything that goes past the width/height is hidden. Here's an example:

div {
  overflow:hidden;
}

Output:

Overflow Scroll

With overflow:scroll property, a scrollbar is added to the right to display the remaining content.

div {
  overflow:scroll;
}

Output:

Overflow Auto

The overflow;auto works the same way like scroll, the difference is that it adds scroll bar only when necessary.

div {
  overflow:auto;
}

Output:

Overflow X/Overflow Y

The overflow-x & overflow-y properties specify whether the scroll is needed just horizontally, vertically or both. Here's an example:

div {
  overflow-x:auto;
  overflow-y: scroll;
}