CSS Overflow Property

The CSS overflow property specifies that when content (text, image and video etc.) of an element (<body>, <div> and <p> etc.) fails in that element, then what to do?

When content is larger than an Element’s Width and Height, CSS overflow property is used to handle that situation.

Example

<!DOCTYPE html>
<html>
<head>
<style>
#overflowTest {
  background: #4CAF50;
  color: white;
  padding: 15px;
  width: 50%;
  height: 100px;
  overflow: scroll;
  border: 1px solid #ccc;
}
</style>
</head>
<body>

<div id="overflowTest">This is a div.</div>

</body>
</html>

Values of CSS Overflow Property

The condition of overflow can be handled in many ways. As if the element from which content is overflow can be applied on the scroll.

If the content that is overflowing is not important then it can also be hidden and clipping can only be shown within the element’s border. For this, you use different values of CSS overflow property. These are being given below.

overflow: visible

When the value of the overflow property is visualized, the content which is being overflow remains visible. This value shows the content element being overflowed out of the border.

Example

div {
  width: 300px;
  height: 60px;
  background-color: #eee;
  overflow: visible;
}

overflow: hidden

When the value of the overflow property is hidden, then the content which is being overflowed out of the border is hidden. Only the content show is inside the border.

Example

div {
  overflow: hidden;
}

overflow: scroll

When the value of the overflow property is given by you, then the element in which the content contains is added to the scroll. Content does not go out of the border, but the user needs to scroll to see the whole content.

Example

div {
  overflow: scroll;
}

overflow: auto

When you define the value of the CSS overflow property, scrolling is added to the element in the same way as the scroll value.

Example

div {
  overflow: auto;
}

overflow-x

By this property you define overflow options for left and right side. This property is used only when defining the overflow option separately for the left and right side.

The same values are used with this property which is used with the overflow property.

Example

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

overflow-y

By this property you define different types of overflow options for top and bottom sides. With this property, the same values are used that are used with the overflow property.

Example

div {
  overflow-y: scroll; /* Add vertical scrollbar */
}