This issue was partially fixed in Internet Explorer 7 beta 2. min/max-width/height support was added for non-image elements in the second IE 7 beta 2 release and can also be applied to images since beta 3. The other issue mentioned here (display:table) was fixed in Internet Explorer 8 beta 2. In IE 7, overflow:visible; still sometimes stretches to fit the contents, if the contents are floats, which breaks both the overflow and float models.
When the contents of a box get too big for the box, what should happen? If you set the width to be a certain size, should the browser be allowed to ignore you? IE certainly thinks so. The standard says that unless you say otherwise, the width should be honoured by any background colouring, and border, but the content should be allowed to spill over the edge. You can ask it to hide that or provide scrollbars if needed. However, IE seems to think that it should stretch the box to fit its contents.
This is a deliberate part of Microsoft's overflow model. It is not an accidental bug. It is a deliberate decision not to do it correctly. It sounds like a good idea, because sometimes you don't want the contents to overspill, and you want it to grow to fit, in order to make a nice effect. However, overall, the standard allows more control. You can either use the overflow to let the contents overspill, or you can use the max-height, min-height, max-width and min-width styles to produce the same effect as in IE. But of course IE doesn't implement those either. Instead, it chooses to make up for one missing feature by ignoring another one. Hmmm.
What this means is that if one piece of the page content needs more space, it drags the entire content with it, stretching it beyond where it should be, and often obscuring other content in the process. This is a particular problem on blogs and forums, when someone puts something slightly too wide to fit in the main content area, and ends up pushing the content area over the navigation panels, or off the side of the page. The page author should be allowed to decide how to deal with this, the browser should not force one long line to make a mess of the whole page.
Demo: These words should be in a box.
The box should not overlap the links to the right.
The long word in this line should overflow the edge of the box but should not force the box to stretch over the links: areallyreallylongwordthatsomeonepasted
Workaround: Use floats and clears to do the min-height style in IE. Unlike other elements, table cells are allowed to stretch to allow their contents to fit, so you can use these to make the other browsers behave like IE. Setting the display:table; or display:table-cell; styles on any other element will have the same effect (I will cover this in a later section). Mozilla/Firefox, Opera, Safari, Konqueror, iCab and ICEbrowser will use the display:table-cell; and will therefore allow it to stretch to fit the contents. IE does not understand display:table-cell; but it also doesn't obay the standard and will stretch it anyway. Unfortunately, there really is no easy way to produce the correct overflow:visible; effect in IE.