容器内的 div 不会滚动答案

【问题标题】：div within container won't scroll容器内的 div 不会滚动
【发布时间】：2014-07-06 15:02:53
【问题描述】：

我在<div> 中有一个动态<ul>，我希望<div> 调整为<ul> 的大小。这没有问题。但是当我用overflow: auto将所有东西包装在容器<div>上时，第一个<div>不会调整到<ul>的大小，而是调整到容器的大小，所以<ul>和<li>打破并飞溅到<div> 的右边框，并且不会水平滚动。

结构类似于：

<div id="mainContainer">
    <div id="iWantToBeHuge">
        <ul>
            <li> Stuff </li>
         </ul>
    </div>
</div>

还有 CSS：

#mainContainer {

    width: 200px;
    height: 500px;

    float: left;

    overflow: auto;

}

#iWantToBeHuge {

    width: auto;
    height: 95%;

    /*    already tried these    */
    /*    position:absolute;     */
    /*    position:relatve;      */
    /*    float: left;           */

}

http://jsfiddle.net/7EYTh/

另外 - 添加静态大小不是一个选项，内容可以是 30 像素到 3000 像素宽之间的任何内容。

【问题讨论】：

您的#iWantToBeHuge 宽度设置为自动，它会根据父级的大小进行调整。将其更改为 500 像素，魔法应该会发生。
是的，我意识到我错过了那部分，我没有使用固定大小是有原因的，内容可以是 30px 到 3000px 宽之间的任何内容。
Expand container div with content width的可能重复
@Jeremy 正如我在代码中所述，我已经尝试了该问题中提供的解决方案，但它们没有用。

标签： html css

【解决方案1】：

Jesus Rugama 的answer 解释了为什么没有垂直溢出。由于您正在寻找水平溢出，

目前没有任何东西水平溢出您的容器。如果你想要滚动条，你应该创建溢出，例如

#iWantToBeHuge {
  width: auto;
  height: 95%;
  white-space:nowrap;
}

Demo

【讨论】：

做到了，你是个天才。谢谢

【解决方案2】：

你不应该使用 height: 95%; ，这意味着当你使用相对高度时，元素使用父元素来确定大小。所以你告诉#iWantToBeHuge 使用#mainContainer 高度的95%。

如果您想看到滚动条，请尝试将#iWantToBeHuge 的高度更改为比#mainContainer 更大的尺寸，即：600 像素。或者只是删除高度样式，以便它可以适应ul。

编辑：尝试使用此 CSS 进行水平滚动：

#mainContainer{
    width: 200px;
    height: 600px;
    overflow: auto;
}

#iWantToBeHuge ul li{
    white-space: nowrap;
}

【讨论】：

对不起，问题不是垂直滚动而是水平滚动。而且我也不能使用固定大小，内容的大小变化很大。
@whitelionV 你没有提到它。通常当你说scroll 时，尤其是从你演示的外观来看，人们会认为它是垂直的scroll
@TilwinJoy 我编辑了这个问题，试图让它更清楚一点。