如何在容器内的行上打破span-element内联块？

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

但#item3只会出现在下一行。

我尝试制作所有内容display: inline，但之后我无法分配任何height - 属性。

我附上了我想要实现的目标。

这就是布局应该是什么样子。 ＃item3继续在下一行：

Answer 1

除非您使用文本的自然包装，否则您在技术上无法提出要求：

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

<强>小提琴： https://jsfiddle.net/658tdurx/1/