ラップされた要素のCSSコンテナの幅

Question

いくつかのインラインブロック要素を囲むようにコンテナdivを展開しようとしています。コンテナが縮小されるか、要素を追加するまではすべて動作します。ここ

.top { 
 
    width: 80%; 
 
    background-color: red; 
 
} 
 
.container { 
 
    background-color: gray; 
 
    display: inline-block; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    background-color: blue; 
 
    height: 100px; 
 
    width: 100px; 
 
}

<div class="top"> 
 
    <div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

例です。 https://jsfiddle.net/8fhjaf6z/11/

灰色の容器は、ボックスを追加するか.topコンテナを縮小するまで、箱の中を囲みます。その時点で、ボックスは折り返して次の行に移動しますが、これは灰色の.containerが赤色の.topコンテナを塗りつぶし、右側に空きスペースが残っています。 .box要素も浮動させようとしましたが、同じ結果が得られました。

ご協力いただければ幸いです。

Answer 1

次の行に移動したボックスで作成されたスペースを埋める方法の1つは、.containerの表示をインラインに設定することです。これでボックスの後ろに灰色の背景が表示されます。トップパディングを使用すると、より灰色の背景には（height属性では不可能であるインライン要素に高さを設定するための回避策として）箱の完全な高さを取ることができます：

.top { 
 
    width: 80%; 
 
    background-color: red; 
 
    font-size: 0; 
 
} 
 
.container { 
 
    background-color: gray; 
 
    display: inline; 
 
    padding: 105px 0 0 0; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    background-color: blue; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0 0 5px 5px; 
 
}

<div class="top"> 
 
    <div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>