Ширина контейнера 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. В этот момент коробки обертываются и переходят к следующей строке, что я хочу, но теперь серый. Контейнер заполняет красный контейнер .top, оставляя пустую пустоту справа. Я также пробовал использовать элементы .box, но получаю те же результаты.

Любая помощь будет оценена по достоинству.

Answer 1

Один из возможных способов заполнить пространство, созданное ящиками, которые переместились на следующую строку, - установить отображение .container в строку. Теперь у вас серый фон только за коробками. С верхней прокладкой вы можете чем сделать серый фон принять полную высоту коробка (как обходной путь для установки высоты в строковом элемент, который не является возможным с атрибутом высоты):

.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>