Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firefox: box-sizing and min-height

Tags:

html

css

firefox

I can’t understand: is this really a bug or am I just missing out something?

I have box-sizing: border-box set for all my div within an HTML document (with all the -moz and -webkit prefixes, of course). So it means the height of a div always includes its padding. It’s reasonable to expect the min-height property to act similarly. But apparently, in Firefox it doesn’t.

I mean, when I have a div with no height set (i.e. height: auto), but with a min-height (say, 220px) and padding (say, 10px), it results in the overall height of the div being 240px instead of 220 in Firefox! It stays alright either way in Chrome and Opera, though.

Shouldn’t this be fixed, or is it some sort of a feature which I don’t get?

like image 397
Arnold Avatar asked Oct 21 '10 03:10

Arnold


2 Answers

…is this really a bug… Shouldn’t this be fixed, or is it some sort of a feature which I don’t get?

It will be fixed (it's a bug not a feature).
But for now you should vote on this bug.
If it's any consolation min-/max-width seems to be working just fine though.

like image 109
Knu Avatar answered Oct 26 '22 23:10

Knu


I wrote a Modernizr test to detect this constellation (min-height, padding and box-sizing: border-box). You can read more about it over at my blog or see a JSFiddle with the test and a fix applied.

like image 37
Volker Rose Avatar answered Oct 27 '22 00:10

Volker Rose