title: general container - CSS horizontal scrollbar problem
body: <p>this is a follow-up to this issue:<br>
  <a href="https://stackoverflow.com/questions/5554137/general-container-ie8-horizontal-scrollbar-problem">general container - IE8 horizontal scrollbar problem</a></p>
  
  <p>I would like to create a <code>float:left</code> (or 'position: absolute' - the same problem) container<br>
  that is constrained vertically (it has a fixed outer height) - so it may have a vertical scrollbar;<br>
  but that can grow horizontally (as needed by the content of the container), so it never has a horizontal scrollbar  </p>
  
  <p>it has to work in IE8, FF, Chrome (no IE7 or earlier)  </p>
  
  <p>the solution seems to be trivial<br>
  but I can not get rid of the horizontal scrollbar in FF or Chrome (IE8 is OK):</p>
  
  <pre><code>&lt;div style="float: left; height: 20em; overflow-y: auto;" class="container-div"&gt;
      &lt;div style="width: 30em; height: 30em; background-color: red;" class="example-content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/slobo/pydsZ/" rel="nofollow noreferrer">http://jsfiddle.net/slobo/pydsZ/</a></p>
  
  <p>in this example, we need a 20em high container, that can grow horizontally, as needed by the content (in this case, the "example-content" div)<br>
  please don't suggest to modify the "example-content" div, as it is just a sample content (any content could be there)</p>
  
  <p>modifying <code>overflow-y: auto</code> to <code>overflow-y: scroll</code> solves the problem; but I would like to keep <code>overflow-y: auto</code></p>