css, Wrap element around images, regardless of screensize

css, Wrap element around images, regardless of screensize

This is similar to my earlier question css, Wrap element tightly around
unspecified number of images, but I realized that I have an extra
requirement.
I have an element that displays images. This element needs to grow
horizontally with the number of images. I do not know beforehand how many
images there will be.
Also, if the screen is smaller than max-width of the element, then the
images should go to the next line AND the outer element should shrink
accordingly.
http://jsfiddle.net/sXgzn/14/ illustrates the issue.
<div class = "outer">
<img src = "xx" class = "inner" />
<img src = "xx" class = "inner" />
<img src = "xx" class = "inner" />
</div>