How to Use the CSS Overflow Property

<Display TypesObject Fit>

Code Playground is only enabled on larger screen sizes.

The overflow property defines what happens when the content cannot fit inside the content box.

By default, CSS tries to avoid content loss, meaning the content will flow outside of the box if necessary. For example, this <p> element is contained inside a 300 x 100px box:

<p>Lorem ipsum. . .</p>

p {
  width: 300px;
  height: 100px;
  border: solid;
}

As you can see, the content gets pushed outside of the box and overlaps with the next element.

This is a bad thing when you are trying to create a webpage layout that depends on this box having a fixed size. So instead, you can tell the browser to hide the overflown content by setting overflow to hidden.

p {
  width: 300px;
  height: 100px;
  border: solid;

  overflow: hidden;
}

But now, we have a new problem. The information is lost, and the user cannot see the full content. A better option would be setting overflow to scroll, allowing the user to scroll inside the defined box.

p {
  width: 300px;
  height: 100px;
  border: solid;

  overflow: scroll;
}

Alternatively, if you are not sure about the actual size of the content, and you don't know if scrolling is necessary, you can let the browser decide by setting overflow to auto. The scroll bar will only appear when the content overflows and scrolling is necessary.

p {
  width: 300px;
  height: 100px;
  border: solid;

  overflow: auto;
}

The content will not be hidden in this case.

<Display TypesObject Fit>