html - div の水平スクロールが期待どおりに機能しない

Question

私の問題をデモするためにjsfiddleを作成しました： ここではcssと一緒です

<div -d=wrapper">
<div id="header">Hello, I'm the header</div>
<div id="content">
    <div id="content-left" >Some text in left</div>
    <div id="content-right">Some text in right</div>
</div>
<div id="footer">Footer</div>
</div>

私が欲しいのは、ウィンドウがx軸で狭くなるにつれて、divのcontent-leftとcontent-rightが狭くなり、スクロールバーを発芽させることです。

両方の div に十分なスペースがなくなると、それらを狭めるのではなく、content-left の下に content-right をスタックします。必要な場合にのみスクロール バーが表示されるようにしたいと思います。

Answer 1

width#content に明示的に設定しないと、巧妙に要素をラップしようとします。

jsフィドル

#content {width:300px;}