May 25th 2015

CSS Overflow

What happens when you have too much stuff in an HTML container? Overflow...

What is CSS Overflow?
Most HTML elements have the ability to shrink and grow with the content inside. Meaning if you have a lot of text inside a <p> tag the paragraph will grow and adapt to the size it needs to get in order to contain the entire text in there. Sometimes you have limited space and you can't just let your container grow any bigger, even if the content inside of it was too much. So what do you do?

The Problem
Your container is too big so you give it an explicit width/height in order to keep it a certain size. But then you realize the content is still showing/overflowing out of your container.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi bibendum, consequat felis nec, consectetur eros. In sagittis neque in nulla eleifend lacinia. Sed quis ligula sit amet ligula sodales efficitur nec non arcu. Pellentesque quis nisl commodo, rutrum enim facilisis, varius lorem.</p>
p{
	width: 200px;
	height: 100px;
}

It sucks, right? What are our options?

Option 1: Overflow Visible
This is the default option. It sucks, we don't like it. It renders the overflow regardless of the container size.

overflow: visible;

Option 2: Overflow Hidden
This will cut off your content where the container ends. This is a good option if you don't care about the rest of the content, which if the content is text you probably do. So you use this if you are rendering images or things that have hotspots and you don't care about the overflow.

overflow: hidden;

Option 3: Overflow Scroll
This is a cool option because it will let you scroll to see the overflowing content.

overflow: scroll;

Option 3: Overflow Auto
Overflow Auto is just like Overflow Scroll but it only gives you a scroll bar if the content is bigger than the container. Note: You will only notice a difference between Auto and Scroll in older browsers and operating systems that draw an actual scroll bar on the side of the window.

overflow: auto;

Back to Blog