大きな入れ子要素の周りのストレッチコンテナ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に定義された境界線が、このイメージで見られた結果を与える「詳細」のdivを中心に展開されないということです：：http://img849.imageshack.us/img849/1719/capturepw.png

を私はこれを行うには、次の簡単なコードを持っています

HTMLとCSSでこれを簡単に解決できますか？

更新：「幅：300％」の詳細は、単に大きなデータセットをシミュレートすることです。このデータセットがどのくらい広がっているかを事前に知る方法はありません。

Answer 1

変更100%ためinner上width、300px、基本的に300％で行く100以上の割合が、何がその親要素の3倍の幅になりますが、それに影響を与えることはありません。

編集：300%幅を置く

は、ダミーコンテンツの多くを含むようにあなたのレイアウトから同じ反応を得られません。 dummy contentをdetails要素に入れてwidthを削除してください。より現実的な結果が得られます。

Answer 2

これはあなたの個人的ジェイソンではありませんが、それについて考えるdetails divオフwidthを取り、それをinner div

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