I have the following HTML code:\[code\]<div class="main"> <div class="container"> <div class="contents"> Blah blah blah blah blah blah blah blah <br /> Blah blah blah blah blah blah blah blah <br /> Blah blah blah blah blah blah blah blah <br /> Blah blah blah blah blah blah blah blah </div> </div></div>\[/code\]With the following CSS:\[code\].main { overflow: auto; width: 200px;}.container { border: 1px solid black;}.contents { width: 300px;}\[/code\]This is what this page does (see it at http://jsfiddle.net/C7RDh/):
- \[code\]main\[/code\] div is 200px width, with overflow: auto (i.e. scrolls contents if wider than 200px).
- So, as \[code\]contents\[/code\] div is 300px wide, it scrolls horizontally.
- So, I would expect \[code\]container\[/code\] div to be 300px as well (as elements inside it are 300px wide), but it is not! It's 200px wide.