Css DIV未将宽度调整为另一个DIV内的内容，溢出：auto

我有以下HTML代码：

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

这就是本页的功能（请参见）：

• main

  div的宽度为200px，溢出：自动（即，如果宽度大于200px，则滚动内容）
• 因此，当

  contents

  div的宽度为300px时，它会水平滚动
• 因此，我希望

  container

  div也是300px（其中的元素是300px宽），但它不是宽200像素

---

为什么？我希望它和它的内容一样宽（300px），我如何才能做到这一点？

您需要稍微调整CSS。这将有助于：

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

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

---

实际上，您应该在容器css中添加

溢出：auto

，而不是main css

您只需要使容器浮动

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

---

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

只是好奇，你能解释一下为什么会这样吗？如果我不是css大师，我会和@antur123站在同一条船上。我同意@John的观点，为什么这会起作用，而“预期”（从我的角度来看）风格不起作用？很好的解释是：享受。我看不到任何关于

overflow:auto和<代码>浮动：左侧一起在那里…为什么你认为你应该看到？因为float和overflow没有任何共同之处。溢出只会允许您的容器通过引入垂直/水平滚动条来容纳通常不适合的内容。这不是我的情况，我这样问是因为我有一个场景，我必须处理类似的情况，没有机会做您建议的事情。它实际上很好，但是，为什么
container
div在没有
float:left
样式的情况下不能自我调整？inner div占据了没有float的外部div的所有宽度，这意味着您的外部div（在本例中，main是200px，因此您的inner div.container自动占据了所有200px）不管你的.contents div宽度是多少，我建议你使用这个答案而不是另一个答案或
显示：内联块工作得非常好。很好地解释了一些类似的问题。默认情况下，DIV似乎扩展了100%，在我的例子中，
container
的100%是
main
的宽度：200px
.container {
     border: 1px solid black;
     float: left;
 }