Shrink-wrapping a fluid image
A version of this problem occurs in IE10, Chrome, and Safari as well. It's more obvious if the image is made partially transparent, as in this modified demo. container2 is sized as intended when the page first loads, but if the browser is resized, it keeps its initial width.
Opera behaves the same as Firefox.
It appears that the shrinking-wrapping of container2 (its width being only so large as is needed to fit its content) depends to some extent on having a known width to work with for the child content. For Firefox and Opera, when given width:auto
for the child image, it uses the natural width of the image, regardless of the actual scaled width. The other browsers are able to calculate the display width when shrink-wrapping container2, but they only do so when the page first loads; after that, the initially-calculated value continues to be used.
In short, Firefox and Opera never perform the width calculation. And the other browsers only perform it when the page first loads, not when the browser is re-sized.
Workaround
There doesn't appear to be an obvious way to force the browsers to perform a width calculation for the child image; however, if the only reason that container2 is needed is to absolutely position other content on the right side on the image, then there's another way to accomplish this:
Instead of shrink-wrapping a container around the image, place an element alongside it (inline-block
or floated), and use that element to place the absolutely positioned content.
In both demos, container2 is a sibling of the image. A small element with text content and a black background is absolutely positioned in container2, to demonstrate placing content to the right of the image. To make things more obvious, container2 was given a width of 10px
and the same red background, but it works fine with a width of 0.