The background color of the below p element does not extend outside of its parent element because the p element is not participating in the overflow process. The text of the paragraph is contained within an anonymous inline box and this is the actual participant in the overflow process. Since anonymous inline boxes only inherit inheritable properties and background-color is not one of these properties, the anonymous inline box has the default background-color value of transparent.
When you hover the cursor over the below paragraph, display: inline should be applied to it. As a result, it does not generate any anonymous inline boxes. It is the paragraph element itself that participates in the overflow process. Thus, you should see the background color “expand” to encompass the entire text.
This paragraph of filler text may not wrap. It should be long enough to overflow its containing element.
Note that the expanding box bug will prevent you from seeing the effect in Internet Explorer 6.