back to CSS code snippets

Overflow Attribute

The overflow attribute in CSS will allow you to create a scrollable area inside your website. This will allow you to control the look of your site, even if the content that you are placing on the site seems like it will now allow that content.

<style>
.flowover {
	overflow: auto;
	height: 100px;
	width: 100px; 
}
<style>
< !-- Additional code //-->
<div class="flowover">Here is the content that should overflow in the div HTML element.  If there is enough text, then there will be a scroll bar that will appear.</div>
< !-- Additional code //-->

We created a simple class called overflow. With this class we set the size of the element's height and width, and the overflow attribute to auto. The overflow attribute can be set to one of the following values, Below is examples of each value that can be applied to the overflow attribute. There is a border around each div tag in the example to show the element's size.

Hidden:

This value will hide the scroll bar if the content of the element overflows. It will also not show any content that has overflowed.

Scroll:

The scroll content will allow the overflowed content to be seen with the use of a scroll bar. If the content does not overflow, then the scroll bars are still shown.

Auto:

Auto will show the content similar to scroll. The only difference is if the content does not overflow, then it will not show the scroll bars. This allows for a cleaner looking site.

Visible:

This is the default value, and if the content does overflow the content is rendered outside of the element.