K-U-H-N.net

Trying to find a way to implement max-width behaviour in IE6-, I stumbled upon an Opera/IE7- bug concerning their shrink-wrap behaviour. Firefox 3, Safari 4 and Chrome 2 do not show this bug and it has also been fixed in IE8. The bug shows in Opera 9.64, feedback on earlier versions would be appreciated.

If we put a shrink-wrapped inner box (dark gray) with some content inside an outer box (light gray) with an explicit width set, the inner box will grow with its content until it reaches the content-edge of the outer box. At that point line-breaking or overflow is induced in the inner box. So far so good, but after a linebreak IE7- and Opera shrink the box to fit the text's width while all other aforementioned browsers dont't (See Figs. 1-3).

Well, that can't be right... Let's have a look at the specs:

Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

Ok, what does that mean for our little example?

1. The preferred width is a lot longer than the outer box's width, as the text does not fit inside the box without a linebreak.
2. The available width is the width of the outer box.
3. The preferred minimum width, although not further specified, is definitely smaller than the outer box's width, as there is no word longer than the outer box's width.
4. The maximum of the preferred minimum width and the available width, is the available width (2 + 3).
5. The minimum of the available width and the preferred minimum width is the available width (1 + 2).

Therefore (4 + 5), the shrink-to-fit width is the available width.

In conclusion, though at first glance it may not seem so, IE7- and Opera are wrong.

As always, feedback is appreciated.