Inline-Block Spannweite-Element über Reihe innerhalb des Behälters brechen?

Question

Ich habe folgende HTML-Code einfach

<span class="container"> 

    <span id="item1" class="item"> 
     <button class="removeitem"></button> 
     <span class="text"></span> 
    </span> 

    <span id="item2" class="item"> 
     <button class="removeitem"></button> 
     <span class="text"></span> 
    </span> 

    <span id="item3" class="item"> 
     <button class="removeitem"></button> 
     <span class="text"></span> 
    </span> 

</span> 

die # Stellen Sie sich vor item3 erstreckt .Behälter, aber Überlauf ist versteckt. Wie kann ich erreichen, dass die Elemente im Inneren noch sichtbar sind und in der folgenden Reihe weitermachen?

Ich habe versucht, die folgenden (in SASS-Syntax):

.container 
    display: flex 
    justify-content: flex-start 
    flex-wrap: wrap 

, aber # item3 wird auf der nächsten Zeile nur erscheinen. Ich habe versucht, alles display: inline, aber dann kann ich keine height -Eigenschaften zuweisen. Ich fügte ein Bild von dem, was ich erreichen möchte. Irgendwelche Tipps, Ratschläge oder Hacks?

This is what the layout should look like. #item3 continues in the next row

Answer 1

Was Sie fragen, technisch nicht möglich ist, wenn Sie die natürliche Verpackung von Text, wie in diesem Beispiel verwenden:

.item { 
    display: inline; 
    background: yellow; 
    margin-right: 5px; 
    border: 2px solid green; 
    line-height: 2; 
} 

Fiddle: https://jsfiddle.net/658tdurx/1/