CSS: Should we change the default for overflow?

For the CSS overflow property, should auto or hidden be the default instead of visible?

If you write a lot of CSS, there is a good chance your immediate response would be “no way!” But hear me out! There are several awesome benefits to one of these being the default, and in my opinion, many or all of the drawbacks are based around the fact that it’s just not what we’re used to, rather than being real a problem once you adjust. Let’s look at the pros in cons in detail.

Why does this matter?

It matters because this is a real option for writing CSS today. It has become a common suggestion to put the following box-sizing CSS on your sites:

* {
box-sizing: border-box;
}

This basically says “hey, we don’t like the default behavior for box-sizing, so lets use a different behavior by default for every element.” So, why not use this technique for other things? You could do this:

* {
overflow: auto;
}

It’s definitely a real option. You can’t just slap this on an existing site and have it work: you’d need to design things like this from the start. Let’s look at what would change if you did just that.

The Good

One thing that happens is that you can forget about clearfix. In IE7+ and all modern browsers, overflow: auto; would automatically clearfix everything:

This is actually quite convenient. Without this, you’d have to hack around with margins and paddings in a way that would result in less maintainable CSS.

The Weird

To explain what’s weird, first we have to understand what the default behavior that we’re changing is. The default value for overflow is visible. That means if an element’s content doesn’t fit, the content is still shown sticking out of the element.

Setting overflow to auto or hidden forces you to be more diligent about sizing and using flexible sizing where possible. This might not be such a bad thing. However, there are cases where it’s a little bit more annoying:

This is definitely unexpected at first. Where are the box shadows on the second two? Box shadows are treated as part of the element they decorate. With overflow: hidden; it is hiding the box shadows since they would be outside of their container. With overflow: auto; it’s a little more subtle: it is behaving like overflow: hidden; because auto has decided it’s not worth putting scrollbars for a box shadow (which is actually smart) so it hides them instead.

How do you fix this? The same way we fixed that menu bar earlier: by making the container big enough to fit the content:

Auto or Hidden?

Everything we just discussed applies to both auto and hidden. So which is a better default?

Well, auto sort of “feels” right. It has intelligent behavior that seems to do an OK job deciding what to do based on the situation. On the other hand, auto can create situations where scrollbars show up in unexpected places. Nothing is more annoying than unexpected scrollbars.

On the other hand, hidden does make sense in its own way. Why should an element allow its content to be displayed outside of itself?

For now I’m leaning toward auto, but I’m willing to be convinced the other way.

OK, what now?

I’m thinking about using * {overflow: auto;} on my next personal project to see how it goes. It’s fun and interesting do this kind of academic cogitation, but what really matters is how it goes down in practice. Would you consider trying this out? Is it not worth the trouble? What if it turned out great and became an idiom that was used more and more commonly? Let me know what you think in the comments!