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 300x100 box:

html

<p class="overflow">Lorem ipsum. . .</p>

css

.overflow {
  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 not ideal when your webpage layout depends on this box having a fixed size. So instead, you can tell the browser to hide the overflow content by setting overflow to hidden.

css

.overflow {
  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 in this case, would be setting overflow to scroll, allowing the user to scroll inside the defined box.

css

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

Alternatively, if you are not sure about the actual size of the content, which is very common if the content is user generated.

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.

css

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

overflow:

Wide content:

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 Item 16 Item 17 Item 18 Item 19 Item 20

Tall content:

Line 1 — overflow test content

Line 2 — overflow test content

Line 3 — overflow test content

Line 4 — overflow test content

Line 5 — overflow test content

Line 6 — overflow test content

Line 7 — overflow test content

Line 8 — overflow test content

Line 9 — overflow test content

Line 10 — overflow test content

Line 11 — overflow test content

Line 12 — overflow test content

Line 13 — overflow test content

Line 14 — overflow test content

Line 15 — overflow test content

Line 16 — overflow test content

Line 17 — overflow test content

Line 18 — overflow test content

Line 19 — overflow test content

Line 20 — overflow test content