css - CSS：溢出：自动+指定宽度

Question

示例：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>

如果指定了容器内元素的宽度，他会移除父级的边缘，创建水平滚动。在 Mozilla 和 Chrome 中最具特色的行为。但是 Opera 和 IE 显示都可以。如何解决问题？是错误吗？

Answer 1

父容器有一个max-width:90%, 意味着它会尽可能地变小，但它永远不会超过视口宽度的 90%。

当这个 90% 小于 300px（child）时，水平滚动条正在创建，这个过程是完全正常的，你只需要意识到 child 有一个固定的宽度，它不会变小。

max-width:300px;在 上使用，如果可以的.content话，这将允许它具有 300 像素的宽度，但是当父级 (90%) 较小时，它会变得更紧。

演示