DIV not adjusting width to contents inside another DIV with overflow: auto

Question

I have the following HTML code:

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

With the following CSS:

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

This is what this page does (see it at http://jsfiddle.net/C7RDh/7/):

• main div is 200px width, with overflow: auto (i.e. scrolls contents if wider than 200px).
• So, as contents div is 300px wide, it scrolls horizontally.
• So, I would expect container div to be 300px as well (as elements inside it are 300px wide), but it is not! It's 200px wide.

How come? I want it to be as wide as its contents (300px), how can I achieve that?

Answer 1

You need to slightly adjust your CSS. This will work:

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

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

Answer 2

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

Answer 3

You just need to make you container float

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

Float will automatically adjust your outer div to inner div width.