There should be no red showing below this text, no matter how narrow you make the window.

Mozilla/Firefox padding and overflow bug

Make your browser window wider and narrower, and watch what happens to the height of the paragraph.

How to trigger the bug

Use overflow: hidden, auto or scroll, and either left or right padding. It's that simple.

What is going on here?

When a block element gets narrower, the browser must reflow the text in it, so that it is narrower, but requires more vertical height. When overflow and padding are used, Mozilla/Firefox trips up. When calculating the new height of the paragraph, it seems to think the paddings are twice as big as they actually are. This means that it thinks it has less available width to play with, and makes it too tall to compensate. However, when laying out the text, it lays it out correctly, using the correct paddings. This results in an extra gap being added inside the bottom of the element.

This bug was not present in Firefox 1.0, but is present in Firefox 1.0.x.

What can be done to workaround this bug?

Sorry, I could not find any way to avoid this, short of specifying a height for the element. If you find a workaround, please let me know.

Reported?

Reported to Bugzilla as bug 292653, and may be related to bug 233078.