div的水平滚动不按预期工作

Question

我做了一个jsfiddle来演示我的问题：here it is along with the 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>

我想要的是divs content-left和content-right得到更窄和sprout滚动条，因为窗口在x轴上变得更窄。

它的作用是，一旦没有足够的空间容纳两个div，它就会将内容叠加在内容左侧，而不是缩小它们。我希望滚动条仅在需要时出现。

Answer 1

为#content明确设置width，否则会尝试聪明并包装元素。

jsFiddle

#content {width:300px;}

Answer 2

<强> JSFiddle

如果您需要max-width，请设置#content ...然后为每列提供50％的宽度。

#content{
max-width: 300px;
}

#content-left{
width: 50%;
}

#content-right{
width: 50%;
}