컨테이너 내부의 행에 걸쳐 스팬 요소 인라인 블록을 분리 하시겠습니까?

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> 

이 항목 3가 .container 확장 #을 상상해 가지고 있지만, 오버 플로우가 숨겨져 있습니다. 내부 요소가 계속 표시되고 다음 행에서 계속 될 수 있도록하려면 어떻게해야합니까?

은 내가 (SASS 구문에서) 다음과 같은 시도 :

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

하지만 #의 항목 3은 다음 행에 나타납니다. 나는 모든 것을 만들려고했지만 display: inline, 어떤 height- 속성도 할당 할 수 없다. 내가 원하는 것을 이미지로 첨부했습니다. 모든 팁, 조언 또는 해킹? 이 예에서와 같이 텍스트의 자연 포장을 사용하지 않는

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/