スパン要素のインラインブロックをコンテナ内の行オーバーにしますか？

Question

は、私は、次のHTMLコード

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

がITEM3が.container拡張＃を想像していますが、オーバーフローが隠されています。内部の要素が引き続き表示され、次の行に続きますようにするにはどうすればよいですか？

私は（SASS-構文で）次のことを試してみました：

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

を、しかし＃1 ITEM3はちょうど次の行に表示されます。 私はすべてdisplay: inlineを作成しようとしましたが、次にheight -propertiesを割り当てることはできません。 私は達成したいもののイメージを添付しました。ヒント、アドバイス、ハックあなたはこの例のようにテキストの自然の折り返しを使用しない限り

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

Answer 1

何を求めていることは技術的に不可能である。

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

フィドル： https://jsfiddle.net/658tdurx/1/