У меня есть следующий HTML:

<div class="main_container">
    <div class="sub_container">
        <div class="floating">wookie1</div>
        ...
        <div class="floating">wookie5</div>
    </div>
</div>

Считайте, что это как галерея изображений.

main_container имеет нефиксированный размер, он устанавливается в процентах от разрешения пользователя. Я хочу, чтобы sub_container имел точную ширину суммы плавающего div.

Если я использую «display: table;» для sub_container и "display: inline-block;" для плавающих div'ов это работает нормально:

пока в списке не будет достаточно div, так что сумма ширины будет больше, чем main_container, и они будут разбиты на следующую строку:

Но тем не менее, я хочу, чтобы субконтейнер (желтый фон) ВСЕГДА ИСПОЛЬЗУЛ ТОЧНУЮ ШИРИНУ суммы div, даже если они идут в несколько строк, например так:

Я уже несколько часов гуглю и не смог найти элегантного решения (только css, если это возможно).

Вотjsfiddle, чтобы поиграть с этим.