通用容器——CSS水平滚动条问题答案

【问题标题】：general container - CSS horizontal scrollbar problem通用容器——CSS水平滚动条问题
【发布时间】：2011-05-25 04:41:47
【问题描述】：

这是此问题的后续：
general container - IE8 horizontal scrollbar problem

我想创建一个float:left（或“位置：绝对”-同样的问题）容器
垂直约束（它有一个固定的外部高度） - 所以它可能有一个垂直滚动条；
但它可以水平增长（根据容器内容的需要），所以它永远不会有水平滚动条

它必须在 IE8、FF、Chrome（没有 IE7 或更早版本）中工作

解决方案似乎很简单
但我无法摆脱 FF 或 Chrome 中的水平滚动条（IE8 可以）：

<div style="float: left; height: 20em; overflow-y: auto;" class="container-div">
    <div style="width: 30em; height: 30em; background-color: red;" class="example-content"></div>
</div>

http://jsfiddle.net/slobo/pydsZ/

在本例中，我们需要一个 20em 高的容器，它可以根据内容的需要水平增长（在本例中为“example-content”div）
请不要建议修改“example-content” div，因为它只是一个示例内容（任何内容都可以存在）

修改overflow-y: auto为overflow-y: scroll解决问题；但我想保留overflow-y: auto

【问题讨论】：

标签： css firefox google-chrome

【解决方案1】：

如果你不想要水平滚动条：

overflow-x: hidden

【讨论】：

这个解决方案会隐藏一些内容，不是吗？我当然不想隐藏任何内容
我查了一下：这个解决方案隐藏了一些内容，所以这不是一个可以接受的解决方案

【解决方案2】：

将浮动的宽度设置为某个固定值以修复它，如果它不起作用设置为 100%

【讨论】：

正如我在问题中所说，容器应根据内容的需要水平增长（因此没有固定或 100% 宽度）