How to Use the CSS Overflow Property

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:

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

1p {
2  width: 300px;
3  height: 100px;
4  border: solid;
5}

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.

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.