CSS Layout - Overflow

CSS overflow property controls how content that is too large to fit into the area is handled.

This text is very long, and its container's height is only 100 pixels. Therefore, a scrollbar has been added to help readers scroll through the content. This text is very long, and its container's height is only 100 pixels. Therefore, a scrollbar has been added to help readers scroll through the content. This text is very long, and its container's height is only 100 pixels. Therefore, a scrollbar has been added to help readers scroll through the content. This text is very long, and its container's height is only 100 pixels. Therefore, a scrollbar has been added to help readers scroll through the content. This text is very long, and its container's height is only 100 pixels. Therefore, a scrollbar has been added to help readers scroll through the content. This text is very long, and its container's height is only 100 pixels. Therefore, a scrollbar has been added to help readers scroll through the content. This text is very long, and its container's height is only 100 pixels. Therefore, a scrollbar has been added to help readers scroll through the content. This text is very long, and its container's height is only 100 pixels. Therefore, a scrollbar has been added to help readers scroll through the content. This text is very long, and its container's height is only 100 pixels. Therefore, a scrollbar has been added to help readers scroll through the content. This text is very long, and its container's height is only 100 pixels. Therefore, a scrollbar has been added to help readers scroll through the content. This text is very long, and its container's height is only 100 pixels. Therefore, a scrollbar has been added to help readers scroll through the content.

Try It Yourself

CSS Overflow

overflow The property specifies whether the content is clipped or a scrollbar is added when the element's content is too large to fit into the specified area.

overflow The property can be set to the following values:

  • visible - Default. Overflow is not clipped. Content is rendered outside the element's box
  • hidden - The overflow is clipped, and the remaining content will be invisible
  • scroll - The overflow is clipped, and a scrollbar is added to view the remaining content
  • auto - With scroll Similar, but only adds a scrollbar when necessary

Note:overflow The property only applies to block elements with a specified height.

Note:In OS X Lion (on Mac), the scrollbar is hidden by default and only appears when used (even if 'overflow:scroll' is set).

overflow: visible

By default, overflow is visible (visible), this means it will not be clipped but rendered outside the element's box:

When you want to better control the layout, you can use the overflow property. The overflow property specifies what happens if the content overflows the element's box.

Example

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

Try It Yourself

overflow: hidden

If you use hidden The value, the overflow will be clipped, and the remaining content will be hidden:

When you want to better control the layout, you can use the overflow property. The overflow property specifies what happens if the content overflows the element's box.

Example

div {
  overflow: hidden;
}

Try It Yourself

overflow: scroll

If the value is set to scrollThe overflow will be clipped, and a scrollbar will be added to scroll within the box. Note that this will add a scrollbar in both horizontal and vertical directions (even if you do not need it):

When you want to better control the layout, you can use the overflow property. The overflow property specifies what happens if the content overflows the element's box.

Example

div {
  overflow: scroll;
}

Try It Yourself

overflow: auto

auto The value is similar to scrollHowever, it only adds a scrollbar when necessary:

When you want to better control the layout, you can use the overflow property. The overflow property specifies what happens if the content overflows the element's box.

Example

div {
  overflow: auto;
}

Try It Yourself

overflow-x and overflow-y

overflow-x overflow-y The property specifies whether the content's overflow is changed horizontally, vertically, or both:

  • overflow-x Specifies how to handle the left/right edges of the content.
  • overflow-y Specifies how to handle the top/bottom edges of the content.
When you want to better control the layout, you can use the overflow property. The overflow property specifies what happens if the content overflows the element's box.

Example

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

Try It Yourself

All CSS Overflow Properties

Property Description
overflow Specifies what happens if the content overflows the element's box.
overflow-x Specifies how the left/right edges of the content are handled when the content overflows the element's content area.
overflow-y Specifies how the top/bottom edges of the content are handled when the content overflows the element's content area.