title: DIV not adjusting width to contents inside another DIV with overflow: auto
body: <p>I have the following HTML code:</p>
  
  <pre><code>&lt;div class="main"&gt;
      &lt;div class="container"&gt;
          &lt;div class="contents"&gt;
              Some funny stuff in here
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With the following CSS:</p>
  
  <pre><code>.main {
      overflow: auto;
      width: 200px;
  }
  .container {
      border: 1px solid black;
  }
  .contents {
      width: 300px;
  }
  </code></pre>
  
  <p>This is what this page does (see it at <a href="http://jsfiddle.net/C7RDh/7/" rel="nofollow">http://jsfiddle.net/C7RDh/7/</a>):</p>
  
  <ul>
  <li><code>main</code> div is 200px width, with overflow: auto (i.e. scrolls contents if wider than 200px).</li>
  <li>So, as <code>contents</code> div is 300px wide, it scrolls horizontally.</li>
  <li>So, I would expect <code>container</code> div to be 300px as well (as elements inside it are 300px wide), <strong>but it is not!</strong>  It's 200px wide.</li>
  </ul>
  
  <p>How come?  I want it to be as wide as its contents (300px), how can I achieve that?</p>