CSS Bug: box-sizing and min-height

, , ,

One thing I’ve (fairly) recently discovered (courtesy of Paul Irish) is the use of box-sizing in CSS3. This little nugget of CSS joy allows you to set element dimensions regardless of padding and borders. In some situations, this is invaluable. For example: say you want to have a container that’s 100% wide but has padding of 20px around the edges. Without knowing what the size of the screen is, you can only do this via javascript or by creating a wrapping container, both of which are annoying. With box-sizing, you can set the padding to whatever you want and it’ll still size perfectly to 100%. Wonderful! Isn’t it?

.container {
	width: 100%;
	padding: 20px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

What’s so great about this is that browser support is already very high; basically everything except < IE8, including all mobile browsers. There are polyfills for IE6 & 7 though, should you care.

So, what’s the down-side? Well I’m currently developing a mobile site in which I want a container to fill the height of the screen, but the container needs padding. No problem, in comes box-sizing:

.container {
	height: 100%;
	padding: 50px 20px 20px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

Great, problem solved, right? Well, it’s not quite that simple. While I want the container to fill the screen height, if the contents of the container grow to larger than the screen’s height, I want the container to grow. That’s okay, that’s what we use min-height for:

.container {
	min-height: 100%;
	padding: 50px 20px 20px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

Looks great! …hang on, what’s wrong with Firefox?! Well there has been a bug logged with Firefox regarding this for years! It’s a very annoying situation as it means having to create a workaround where possible, which either means creating HTML wrappers (booo), browser specific styling (eeek), using javascript (urgh, but see Shane Tomlinson’s version if it interests you) or not using it at all ☹.

One good thing to note however is that the bug has now been fixed! Hooray! Sadly it will take time to filter down into the Firefox releases, and then you’ll still have to wait until that version has enough coverage that you no longer need to worry about the bug (I estimate around May 2013). So for the time being, be cautious with how you use it!