box-sizing: border-box sizing issue in Firefox

Question

I came across a strange issue when testing a site in FF.

The situation is this:

• box-sizing: border-box is applied to everything.
• I have a floated wrapper <div>, with a fixed height.
• Inside the wrapper is an <img> with height: 100%.

When I add padding to the wrapper, I expect the wrapper to remain the same height, and the image to remain the same aspect ratio, but shrink to fit the height minus the padding. The width of the wrapper should change to match the new width of the image, plus the padding.

This behaves as expected in Chrome and IE on both OSX and Win7, but in FF the width of the wrapper seems to remain the same as if no padding was added.

Am I missing something, or is this a bug in the implementation of box-sizing in Firefox?

This fiddle demonstrates the issue:

http://jsfiddle.net/3j43Y/1/

Screenshots:

First image is the result in Firefox, the second one is Chrome.

Answer 1

This appears to be a bug, but it's not calculating the width as if no padding is applied. It's calculating the width as if the content (the <img> tag) has the width it would have were there no padding applied. It's then adding padding on top of this incorrectly calculated content width.

i.e. With no padding, the <img> element has a width of 167px. If you then add padding it should shrink (because of the height constraint) and .wrapper's width should now be the width of the shrunken <img> width plus the padding. Instead, (in FF at least) .wrapper's width is the width of the unshrunken <img> width plus the padding (167 + 16).

At least, that's what I'm seeing.

Also, it looks like you can see the same in Chrome (35.0.1916.114) if you toggle the padding rule on/off in dev tools. Initially Chrome gets it right, but then you see the same erroneous behaviour after toggling padding.