general container - CSS horizontal scrollbar problem

this is a follow-up to this issue:

general container - IE8 horizontal scrollbar problem

I would like to create a float:left (or 'position: absolute' - the same problem) container

that is constrained vertically (it has a fixed outer height) - so it may have a vertical scrollbar;

but that can grow horizontally (as needed by the content of the container), so it never has a horizontal scrollbar

it has to work in IE8, FF, Chrome (no IE7 or earlier)

the solution seems to be trivial

but I can not get rid of the horizontal scrollbar in FF or Chrome (IE8 is OK):

<div style="float: left; height: 20em; overflow-y: auto;" class="container-div">
    <div style="width: 30em; height: 30em; background-color: red;" class="example-content"></div>
</div>

http://jsfiddle.net/slobo/pydsZ/

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)

please don't suggest to modify the "example开发者_开发技巧-content" div, as it is just a sample content (any content could be there)

modifying overflow-y: auto to overflow-y: scroll solves the problem; but I would like to keep overflow-y: auto

---

if you don't want the horizontal scrollbar:

overflow-x: hidden

---

set floater's width to some fixed value to fix it, if it doesn't work set to 100%