css - DIV が、オーバーフローのある別の DIV 内のコンテンツに幅を調整しない: auto: auto

Question

次の 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/を参照):

• maindiv は 200px 幅で、overflow: auto (つまり、200px より広い場合はコンテンツをスクロールします)。
• contentsdiv の幅は 300pxなので、横にスクロールします。
• containerしたがって、 div も 300px であると予想します (その中の要素の幅は 300px であるため)が、そうではありません! 200px幅です。

どうして？コンテンツと同じ幅 (300px) にしたいのですが、どうすればそれを達成できますか?

Answer 1

コンテナを浮かせるだけです

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

Float は、外側の div を内側の div の幅に自動的に調整します。

Answer 2

CSS を少し調整する必要があります。これはうまくいきます：

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

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

Answer 3

Actually you should add the overflow: auto in container css not main css