Box-sizing and min-height CSS trouble within Firefox

Nov 17, 2012

On a recent web project at work I was using box-sizing: border-box on all elements for the first time. As Chrome is my main development browser these days (and probably soon will be replaced by Canary), I only had a a late look on the site with Firefox. I discovered that the height of some elements was going crazy. More precisely: the elements which I used min-height on were way too high.
Some Google research on “firefox min-height bug problem” did bring the connection between box-sizing: border-box, min-height and padding. Turns out that there is a known bug regarding these topics within Firefox since ages some time: If an element is using (vertical) padding, min-height and box-sizing, Firefox simply adds the padding to the min-height.
As open source has always an answer (don’t quote me on this one), Shane Tomlinson wrote a nice article on the height problem and developed a JavaScript function/test that detects if this cruel behavior is active in the current browser.
I did take his function a step further and used it in a Modernizr test.

To sum it all up:


Firefox has a known bug regarding elements with applied border-sizing:border-box, padding and set min-height. It adds the padding to the min-height, resulting in an element that is too tall.


My JSFiddle embedded