Stretch container div around large nested elements

I'm working on a site which displays a very large data set to the user which they can scroll across horizontally. I'm having some trouble with the behaviour of div widths when implementing this.

Essentially I need an outer div with a horizontal scroll and all the data displayed inside this. I have the following simple code to do this:

<div id="outer" style="height:100px;overflow:auto">
    <div id="inner" style="border: 1px solid green;padding:3px;">
        <div id="details" style="background-color:red;width: 300%">Test</div>
    </div>
</div>

My problem is that the border defined on the "inner" div does not expand around the "details" div giving the result seen in this image: http://img849.imageshack.us/img849/1719/capturepw.png

Any simple solution to this with 开发者_StackOverflow社区HTML and CSS?

Update: The "width: 300%" on details is simply to simulate the large dataset. There is no way of knowing how wide this dataset will be beforehand.

Take the width off the details div and add it the inner div

http://jsfiddle.net/jasongennaro/n88tT/

Change the width on inner for 100%, 300px, basically anything but a percentage over 100. Going with 300% will make the element 3 times the width of its parent, but won't influence it.

Edit:

Putting a 300% width won't yield the same reaction from your layout as containing lots of dummy content. Try putting some dummy content in the details element and remove the width. You'll have a more realistic result.