在大型嵌套元素周围拉伸容器div

Question

我正在开发一个向用户显示非常大的数据集的网站，他们可以横向滚动。实现这个时，我遇到了div宽度行为的问题。

基本上我需要一个带有水平滚动的外部div，以及显示在其中的所有数据。我有以下简单的代码来执行此操作：

<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>

我的问题是“内部”div上定义的边框不会在“details”div周围展开，给出此图片中显示的结果：http://img849.imageshack.us/img849/1719/capturepw.png

使用HTML和CSS的任何简单解决方案吗？

更新：详细信息中的“宽度：300％”只是模拟大型数据集。无法预先知道此数据集的宽度。

Answer 1

更改width inner 100%，300px，基本上只有100％以上的百分比。使用300％会使元素的宽度增加3倍它的父母，但不会影响它。

修改

放置300%宽度不会产生与包含大量虚拟内容的布局相同的反应。尝试在details元素中加入一些dummy content并删除width。你会得到更真实的结果。

Answer 2

将width从details div移开并添加inner div

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