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显示没问题。如何解决问题？是个bug吗？

Answer 1

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

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

在max-width:300px;上使用.content，这样可以使其宽度达到300像素，但当父级（90％）较小时，它会变得更紧。

DEMO

Css：overflow：auto +指定的宽度

1 个答案: