Ich habe das folgende HTML:

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

Betrachten Sie es als eine Bildergalerie.

main_container hat eine nicht festgelegte Größe und wird als Prozentsatz der Benutzerauflösung festgelegt. Ich möchte, dass sub_container die exakte Breite der Summe des Floating Div hat.

Wenn ich "display: table;" für sub_container und "display: inline-block;" Für schwebende Divs funktioniert es einwandfrei:

bis ich genug div in der Liste habe, so dass die Summe der Breite größer als main_container ist und sie in der nächsten Zeile unterbrochen werden:

Trotzdem möchte ich, dass der Subcontainer (gelber Hintergrund) IMMER die GENAUE BREITE der Summe der Divs ist, auch wenn sie in mehreren Zeilen stehen:

Ich habe jetzt stundenlang gegoogelt und konnte keine elegante Lösung finden (nur CSS, wenn möglich.)

Hier ist diejsfiddle, um damit zu spielen.