new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Sometimes, you might have a lot of content in a parent element that has a limited width or height. By default, the content will remain visible outside of the parent element’s bounds. With the overflow property, you can decide how to handle that overflowing content.

In this video, we’ll cover how to apply the 4 overflow properties of:

  1. ‍Visible: the default
  2. Hidden: clip the content
  3. ‍Scroll: always display scrollbars
  4. ‍Auto: displays scrollbars if content overflows
Clone this projectDownload project assetsDownload lesson assets

Transcript

By default, elements are set to show Overflow. In other words, anything that goes outside the boundary of that element is still visible. That's why the default property is set to visible. The other options let us override that.

We'll cover three of the additional Overflow properties aside from visible: Hidden, Scroll, and Auto.

Hidden clips content that Overflows. Here's a section with some content inside that's partially outside its boundary. If we select the section, and we set Overflow to Hidden, this content is clipped. Let's switch back to visible, and we can see the elements that Overflow outside of the boundary. Back to Hidden? We get the idea.

That's Hidden.

Let's do Scroll. Here's a div block which has a set height. And right now there's more text inside than will fit inside the boundary of the div block. With the div block selected, we can set the Overflow to Hidden. Go to Preview, just as expected, it's clipped — the Overflow is Hidden. But we can't get to the text underneath. Back out of Preview, and with our div block selected, we can set the Overflow to Scroll. And if we go back into Preview this time, we can now Scroll to access the text that was originally clipped off.

That's Scroll.

Finally, let's talk about Auto. Depending on your browser or Scrollbar settings, setting Overflow to Scroll can sometimes display a Scrollbar, even when it's not necessary (even when there's not enough content to go past the element boundary). Auto will display a Scrollbar only if the Overflow is clipped. It's a good way to ensure you don't have a useless Scrollbar when your content doesn't need it.

So. Overflow: Hidden? Clips off content outside the element's boundary. Overflow: Scroll? Let's us Scroll through content — on some browsers with some settings, we see a Scrollbar. And Overflow: Auto? Only shows a Scrollbar (on those browsers with those settings) if the Overflow is actually clipped.