Html 隐藏由特定div引起的水平滚动条

我得到了下一个html：

<div id="container">
   <div id="content"></div>
</div>

容器div宽1050px，仅包含垂直重复的阴影背景

内容分区宽950px，位于容器分区（水平）的中间，包含内容

我需要什么？只有当浏览器窗口小于content div时，水平滚动条才会出现，但container div不会导致滚动条出现。我怎样才能做到

溢出-x:隐藏不起作用

Thx

---

我建议使用媒体查询，检查浏览器是否为950px宽，然后显示滚动条。这将允许您使用

overflow-x:hidden当它变大时，然后当它变小时，您可以执行
溢出-x:scroll并使条形图显示。
你能不能也发布你的css，或者创建一个新的css？给你。现在，如果窗口变小，则会显示滚动条，小于灰色div。如果窗口变小，则需要显示为红色div。不，我需要的滚动条不是在div内，而是正常的浏览器滚动条。如果浏览器窗口小于950px宽，则会显示滚动条。否则-不会。但现在如果窗口宽度小于1050px，它就会出现。那么问题是什么？body{overflow-x:auto；}看这里jsfiddle.net/98Eqf我不想让卷轴出现，如果窗口比grey divOk小，我想你想要得到这个特性：我缩小了它的比例，以便使用小提琴。删除了最外层的容器，我看不出有什么意义。Thnx，它在JSFIDLE上工作，但我有一整页的正文背景，需要与container div对齐。如果我尝试使用自动边距，正文背景在小的浏览器窗口中会错位。。。容器div必须始终位于页面的中间。自动边距强制它在左边浮动如果窗口很小，我会试试。。。但我仍然在寻找更简单的方法（我担心浏览器兼容性失败）