The Guide to CSS Overflow Property
Tags: css, overflow
Published: 2018-05-07 09:37:11

---
title: The Guide to CSS Overflow Property
published: true
description: The basics of this property explained in one article. Enjoy reading!
tags: CSS, overflow.
---

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](https://kolosek.com/css-position-relative-vs-position-absolute/).

##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](https://kolosek.com/css-relative-font-size/).

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](https://kolosek.com/content/images/2018/03/overflow_visible.png)

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](https://kolosek.com/content/images/2018/03/overflow_hidden.png)

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-](https://kolosek.com/content/images/2018/03/overflow_scroll-.png)

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](https://kolosek.com/content/images/2018/03/overflow_y.png)

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](https://kolosek.com/css-overflow/?utm_source=dvt).