min-height/min-width doesn't respect box-sizing in some browsers

Question

See this example: http://jsfiddle.net/vrgT3/5/

I made a 250x250px parent div with overflow: auto; so scrollbars appear when the content overflows the box. I have set a blue background to make it clear when the parent is visible.

Inside the parent is a child div with red background for visibility. It has 8px black borders and box-sizing: border-box; so padding and borders are included in computing the size of the box. The child div is set to min-height: 100% and min-width: 100%.

Expected result: Child div should be the exact same size as the parent, so no blue is shown and no scrollbars appear. The computed box size (content+padding+borders) should be 250x250px. There should be 8px black borders inlaying this, leaving a 234x234px red region.

Works with:

• Midori 4.1 Ubuntu
• Chromium 16 Ubuntu
• Opera 11.61 Ubuntu

Issues with:

• IE 8 WinXP: Horizontal and vertical scrollbars appear. The content is 249x266px with 8px borders giving a computed box size of 265x282px.

• Firefox 3.6 WinXP: Vertical scrollbar appears. The content is 217x250px and computed box size is 233x266px.

• Firefox 10 Ubuntu: Vertical scrollbar appears, content is 221x250px, computed box size is 237x266px.

I have checked caniuse.com and it appears that at least the browsers in question support the required min-height, min-width, and box-sizing. What gives?

Solution: As Marat suggested, this is indeed a browser bug. I've resolved a workaround utilizing JavaScript to add padding/margins to correct for differences in offsetWidth/Height. See it here: http://jsfiddle.net/vrgT3/8/

Answer 1

This is unfortunate bug of Firefox (see bug 308801) and IE8 (IE9 works correctly).

The bug is fixed in Firefox 17+.