0

例: 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 は問題なく表示されます。問題を解決するには？バグですか？

4

1 に答える 1

0

親コンテナには がありmax-width:90%、可能な限り小さくなりますが、ビューポート幅の 90% を超えることはありません。

この 90% が 300px (子) よりも小さい場合、水平スクロール バーが作成されます。このプロセスは完全に正常です。子の幅は固定されており、小さくならないことに注意してください。

で使用するmax-width:300px;と.content、可能であれば 300 ピクセルの幅を持つことができますが、親 (90%) がそれよりも小さい場合は、より狭くなります。

デモ

于 2013-03-13T17:45:13.150 に答える