Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Use CSS Overflow

DZone's Guide to

How to Use CSS Overflow

The overflow property in CSS is crucial for creating attractive looking sites that contain a lot of content. Read on to get more familiar with overflow!

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

The CSS overflow property specifies what to do in case content is too large to fit in the container box. It specifies if a scrollbar should appear, or if 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 the 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;
}

In the example above, we have set the overflow to visible and the content spills outside of the 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;
}

In the second example, we 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;
}

In the third example, we 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;
}

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

Summary

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

Thank you for reading!

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
web dev ,css ,front-end development ,css overflow

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}