Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don’t set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.
There are four values for the overflow property: visible (default), hidden, scroll, and auto. There are also sister properties overflow-y and overflow-x, which enjoy less widespread adoption.
Let’s take a look at each and then discuss some common uses and quirks.
Visible
If you don’t set the overflow property at all, the default is visible. So in general, there is no reason to explicitly set this property to visible unless you are over-riding it from being set elsewhere.
The important thing to remember here is that even though the content is visible outside of the box, that content does not affect the flow of the page. For example:
Generally, you shouldn’t be setting static heights on boxes with web text in them anyway, so it shouldn’t come up.
Hidden
The opposite of the default visible is hidden. This literally hides any content that extends beyond the box.
This is particularly useful in use with dynamic content and the possibility of an overflow causing serious layout problems. However, bear in mind that content that is hidden in this way is utterly inaccessible (short of viewing the source). So for example a user has their default font size set larger than you would expect, you may be pushing text outside of a box and hiding it completely from their view.
Scroll
Setting the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content.
Of note with this value is that you get BOTH horizontal and vertical scrollbars no matter what, even if the content requires only one or the other.
Auto
Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don’t need them.
Float Clearing
One more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn’t clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn’t declared. Like this:
There is more detail about this and floats in general in the article All About Floats.
Cross Browser Concerns
Like most things in CSS, there are plenty of cross-browser quirks with overflow. Here they are:
Scroll bars inside or outside of box?
Firefox puts them outside, IE puts them inside. I believe only IE actually gets this correct (it should be inside).
Make sure to account for this substantial difference.
IE 8 expanding box bug
There are lots of fun new bugs, including some very serious ones that hide entire web pages, with IE. More details here.
Breaking floated layouts
IE 6, 7 and 8 all screw up the default overflow visible and will expand a box horizontally to fit content (likely an image). This is especially painful for layouts built on floated columns, and a single expanded column can push other columns down and cause some pretty seriously borked layouts.
Can scroll bars be styled with CSS?
IE used to allow this in older versions of IE but it has since been discontinued. WebKit/Blink browsers allow it and here’s some information about that. It’s non-standard though and it’s unclear if the standards bodies are interested in standardizing it. If you absolutely need customized cross-browser scrollbars, you’ll need to handle it custom with JavaScript. Here’s a simple start and here’s a StackOverflow thread with recommendations.
IE Trick
IE displays a vertical scrollbar all the time whether it needs it or not. This can be nice for preventing horizontal jumps, but isn’t always desirable. To remove this in IE, you can set overflow to auto on the body element.
Demo
Demos for this article taken from this sample page.
nice dude, always appreciated !
I hope one day we can have tutorial about style switcher (where they switch css files)
Great article Chris thanks! Enjoy your holiday!
Nice read Chris, realy, much apretiated. Can you make some more stuff involving JQuery? Its kinda ” On The Weave” ATM :)
Once again a great article Chris!
Didn’t expect that!
Just thought I should mention – Firefox, IE & Chrome all seem to be doing the same for me …
IE 8 – 8.0.6001.18702
FF 3.0.9 – rv1.9.0.9
Chrome 2.0.181.1
nice.
you can force on vertical scroll or horizontal scroll by using “overflow-y:scroll;” “overflow-x:scroll;”
Can scroll bars be styled with CSS?
its not possible by using css but you can do that using js
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
jquery
thanks Chris, nice article. i esp. like the self-clearing bit !
This is fantastic, thanks for clearing this up!
Nice article, thanks….
My daily first stop…….
Use jQuery to style scrollbars http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
The latests webkit nightlys also have support for custom scroll bar styling.
http://webkit.org/blog/363/styling-scrollbars/
Safari 4 Beta also does support scrollbars styling…
I didn’t know that, pretty interesting… I’m kinda surprised actually. It seems very un-Apple-like to allow for messing with interface elements that benefit so greatly from consistency. Although WebKit ≠ Apple I realize.
You say that Firefox puts scrollbars outside the box, while IE puts them inside.
When you visit the IE 8 expanding box bug link in the article you’ll see that it’s the other way around however: IE 8 puts the scrollbars outside the box (making the box taller) while all other browsers don’t.
I happen to be build a site yesterday and the overflow:hidden does not work in ie. How do I fix it?
I think that the scrollbars inside / outside the box depends on your box model – border-box or padding-box.
IE’s default is border-box (the box is what’s between its borders), FX’s and most others’ is padding-box (the box is wherever text can reach, i.e. borders minus padding etc). That can be changed and unified.
p.s. bug report: the reply preview doesn’t show newlines but the actual reply does.
dude you’re a good teacher! many thanks
Chris,
Good work, and please, do keep it up. I greatly appreciate the time and effort you put into ellaborating on one of “those” CSS properties that can cause a lot of headaches for web designers — especially, if the web page layout needs to be cross-browser compatible.
Perhaps you’ve already covered this elsewhere, but I just recently had to iron out some CSS bugs (mostly IE6 related issues) that were caused by the DOCTYPE declaration. (As a side note, I even had some JavaScript that stopped working because of the UTF-8 Content-Type).
All I wanted to say was that sometimes little things can get in the way. And based upon some of the comments from the readers, it sounds as though quirks do happen on a regular basis, even with some CSS properties that seem as benign as OVERFLOW.
Again, thanks for all your hard work!
I use vertical scroll and horizontal scroll too. Just put “overflow-y:scroll;” “overflow-x:scroll; . Some time the content must be 95% for resolver ie problem. But works . Make the proprety just for ie (example: *width:95% for ie7 or *width:95% for ie6)
this page Bug in IE 8
I’ve never noticed those differences between IE and FF with the overflow property. . . except the one where IE stretches the boxes with overflow:visible; that gave me a lot of headaches.
Nice info about using overflow to clear floats. I’m definitely going to be using this.
Yes this site blows up in IE 8. I understand the bugs in IE 8 based upon the great link you have up there. But I want to see what bugs exist as far as floats and clears in
Firefox, Opera, Chrome, Safari
That would be a great article.
This is the best explanation I have ever read concerning “overflow”, thanks for explaining in such detail.
Just wondering, what’s the name of the red font used in the screenshots?
Nice review Chris. Couple of points:
Firstly, IE7 does allow changing color on the scrollbar. I’ve done it quite recently. I don’t know about IE8 though.
Also, I find it extremely irritating that there is virtually no way to get a block level element to expand naturally while holding floated objects — without either floating the container or adding “overflow: hidden”.
There should be a property in CSS called “contain: all” or something similar. “overflow: hidden” works in most cases, so that’s good. But sometimes you want content inside the container to peek out the edges, maybe using negative margins or absolute positioning. But naturally, this gets messed up by the “hidden” value.
Try this Louis:
/* IE6/7 */
div.container {
zoom: 1;
}
/* IE8 & others */
div.container:after {
content: ‘.’;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Yes, thanks, that does work, however it’s still a messy solution: 7 extra lines of CSS that in most cases is resolved with a simple “overflow: hidden” instead. If only the “zoom” took care of it for all browsers, then it would be cleaner.
Chris this is an excellent and comprehensive look into overflow. One thing I like about overflow:hidden versus, say display:none, is that content that’s hidden is still screen-reader accessible, so if you were doing something like hide/show interaction, users that can’t see the monitor or don’t use a mouse are still able to access hidden content.
Is there such a thing as a “fun” bug? It all makes our lives more painful. Ahh Microsoft, if only you tried a little bit harder…
Thank you for this great post.
I have a small question about but of browsers. How can we make property overflow the same in different browsers?
Thank you very much.
Can you make tutorials about: custom fields, drop down menus vertical and horizontal ?
p.s GREAT POST
Thorough, man. This is a thorough article. Well done, and keep them coming!
Chris,
Have you done in any work with fixed-header tables to go along with your excellent stuff on overflow properties?
For some reason, Safari 3+ and Firefox 3+ have problems holding the header in a fixed position while scrolling the body of a table that will overflow in the y direction?
Any thoughts on this?
Richard
Table cells don’t respect fixed/relative/absolute positioning by design, so a fixed position table header would kind of have to be faked with a different type of element made to look like a table header.
Chris,
Are there any changes planned for CSS that would make it possible to fix the thead element?
Good article.
However, nothing more has been explained about its sister properties, namely ‘overflow-y’ and ‘overflow-x’ and its bahaviour in different browsers. It will be really great if its explained.
Chris. Love your mobile sitce. Could you add search to archives, please?
A great explanation of something I’ve just started learning about. I especially appreciate the IE trick to preventing horizontal jumps. Thanks!
Awesome explanation, Chris. Thanks!
For years I’ve been using clearing divs to clear floats. Never knew that I could just set overflow:auto to the containing element. Thank you, Chris!
“I don’t have any particular opinion on if that’s a good or bad thing, but I can say that having scroll bars all over the content of a website is ugly and gross.”
A website is one thing. But what about a web-app (yahoo mail, google reader, some future web-based Photoshop/GIMP, etc.)
..looks to me like “auto” is the way to go. Thanks for another fantastic article Chris. The properties are pretty self-explanatory but it’s always nice to know for sure and you always do an excellent job explaining this stuff.
Hey there, I am having a problem with Firefox, an absolutely positioned image, and the parent div not hiding the inner content, i.e. the image is overlapping the div even though I have put the overflow: hidden and -moz-overflow: hidden properties.