loading...

The Guide to CSS Overflow Property

neshaz profile image Nesha Zoric ・3 min read

The CSS overflow property specifies what to do in the case a content is too large to fit in the container box. It specifies if a scrollbar should appear, or if a content gets clipped.

The overflow property is a shorthand for overflow-x and overflow-y. The overflow-x property specifies handling the overflow in the horizontal direction, while overflow-y specifies handling the overflow in the vertical direction.

When learning about this, it is useful to know a little something more about positioning.

Values

The overflow property can have different values:

  • visible - content can be rendered outside of the box,
  • hidden - content gets clipped and no scrollbars are shown,
  • scroll - content gets clipped and necessary scrollbars are shown,
  • auto - the browser determines how it will handle the content, it can vary from browser to browser, but generally, scrollbars appear as required.

The overflow property applies only to the block, inline-block and table elements.

Syntax

The following syntax is used for defining the overflow property:

div {
  overflow: hidden;
}

Examples

Now, let’s back this theory up with some examples. When working with text, it should have a proper formatting.

HTML

<div>
  <p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p>
</div>

CSS

div {
  height: 200px;
  width: 200px;
  border: solid thin blue;
  background-color: #fafafa;
  overflow: visible;
}

overflow_visible

In the example above, I have set the overflow to visible and the content spills outside of the containing box.

HTML

<div>
  <p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p>
</div>

CSS

div {
  height: 200px;
  width: 200px;
  border: solid thin blue;
  background-color: #fafafa;
  overflow: hidden;
}

overflow_hidden

In the second example, I have set the overflow property to hidden. The content is clipped and no scrollbars are visible.

HTML

<div>
  <p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p>
</div>

CSS

div {
  height: 200px;
  width: 200px;
  border: solid thin blue;
  background-color: #fafafa;
  overflow: scroll;
}

overflow_scroll-

In the third example, I have set the overflow property to scroll. In this case, the content spills outside the container, and the scrollbars appear.

HTML

<div>
  <p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p>
</div>

CSS

div {
  height: 200px;
  width: 200px;
  border: solid thin blue;
  background-color: #fafafa;
  overflow-y: scroll;
  overflow-x: hidden;
}

overflow_y

Finally, you can see the usage of the overflow-y property. You see only the vertical scrollbar is visible, while the horizontal scrollbar is hidden.

Summary

In this short tutorial, I have explained the overflow property. Hopefully, it will be of any help when you start your next project.

Thank you for reading!

This article is originally published on Kolosek Blog.

Discussion

pic
Editor guide
Collapse
riscie profile image
riscie

Nice one! I would like to add a combo which I use regularly:

div {
    overflow: hidden;
    text-overflow: ellipsis;
}

This will show as much text as possible ending with three dots: '...'.

Collapse
neshaz profile image
Nesha Zoric Author

Thanks for sharing! :)

Collapse
georgeoffley profile image