Css: overflow: auto + specified width - css

Question

Example: http://jsfiddle.net/5VCfm/2/embedded/result/
.container {
position: absolute;
border: 1px solid red;
max-width: 90%;
margin-bottom: 20px
}
.container + .container {
top: 260px;
}
.content-container {
border: 1px solid green;
max-height: 200px;
overflow: auto;
padding: 15px;
}
.content-wrap {
border: 1px solid navy;
}
.content {
border: 1px solid red;
padding: 10px;
}
html
<div class="container">
<div class="content-container">
<div class="content-wrap">
<div class="content">
<h2>No width</h2>
large content see http://jsfiddle.net/5VCfm/2/embedded/result/
</div>
</div>
</div>
</div>
<div class="container">
<div class="content-container">
<div class="content-wrap">
<div class="content" style="width:300px">
<h2>Width 300px</h2>
large content see http://jsfiddle.net/5VCfm/2/embedded/result/
</div>
</div>
</div>
</div>
If width of element inside container is specified, he takes off the edge of the parent creating a horizontal scrolling. What is most characteristic behaves in Mozilla and Chrome. But Opera and IE show all right.
How to solve the problem? Is a bug?

Answer 1

The parent container has a max-width:90%, means it will become smaller as much as it can but it will never surpass 90% of the viewport width.
When this 90% is smaller than 300px (child), the horizontal scroll bar is being created, this process is completely normal, you just have to realize that the child has a fixed width, it will not get smaller.
Use max-width:300px; on the .content, this will allow it to have a 300px width IF IT CAN, but when the parent (90%) is less, it will become tighter.
DEMO