DIV 未将宽度调整为另一个具有溢出的 DIV 内的内容：自动答案

【问题标题】：DIV not adjusting width to contents inside another DIV with overflow: autoDIV 未将宽度调整为另一个具有溢出的 DIV 内的内容：自动
【发布时间】：2013-01-25 08:36:36
【问题描述】：

我有以下 HTML 代码：

<div class="main">
    <div class="container">
        <div class="contents">
            Some funny stuff in here
        </div>
    </div>
</div>

使用以下 CSS：

.main {
    overflow: auto;
    width: 200px;
}
.container {
    border: 1px solid black;
}
.contents {
    width: 300px;
}

这就是这个页面的作用（参见http://jsfiddle.net/C7RDh/7/）：

main div 宽度为 200 像素，溢出：自动（即，如果宽度超过 200 像素，则滚动内容）。
因此，contents div 的宽度为 300 像素，因此它会水平滚动。
所以，我希望container div 也是 300 像素（因为其中的元素是 300 像素宽），但事实并非如此！它是 200 像素宽。

怎么会？我希望它和它的内容一样宽（300px），我该如何实现呢？

【问题讨论】：

标签： css html overflow

【解决方案1】：

你只需要让你的容器浮动

.container {
     border: 1px solid black;
     float: left;
 }

Float 会自动将外部 div 调整为内部 div 宽度。

【讨论】：

它实际上很好用，但是，为什么container div 没有float: left 样式就不能自行调整？
inner div 占用了没有 float 的外部 div 的所有宽度，这意味着您的外部 div（在这种情况下 .main 是 200px 所以您的内部 div .container 会自动占用所有 200px）无论您的 .内容 div 宽度为
我建议你使用这个答案而不是其他答案。
看来float: left; 或display: inline-block; 工作得很好。 stackoverflow.com/questions/6213237/… 很好地解释了一些类似的问题。 DIV 似乎默认扩展 100%，在我的情况下，container 的 100% 是 main 的宽度：200px

【解决方案2】：

您需要稍微调整一下 CSS。这将起作用：

.main {
  overflow: auto;
  width: 200px;
  float: left;
}
.container {
  border: 1px solid black;
  float: left;
}

.contents {
  width: 300px;
  float: left;
}

【讨论】：

只是好奇，你能解释一下为什么会这样吗？因为我不是 css 大师，所以我会和 @antur123 在同一条船上。
我同意@John，为什么这行得通，而“预期”（从我的角度来看）风格行不通？
很好解释：coding.smashingmagazine.com/2007/05/01/…享受。
我看不到 overflow: auto; 和 float: left; 在一起...
为什么你认为你应该看到那个？因为浮动和溢出没有任何共同点。通过引入垂直/水平滚动条，溢出只会让您的容器适合通常不适合的内容。

【解决方案3】：

其实你应该在容器css而不是主css中添加overflow: auto

【讨论】：

这不是我的情况，我问这个是因为我有一个场景，我必须处理类似的情况，没有机会按照你的建议去做