当文本为多行时如何去除多余的空间

Question

我正在写一个徽章式的块。

问题在于^第三个块 ( 1 (Something something))，正如您在代码段中看到的，它溢出到下一行并在右侧留下额外的空间。

我应该怎么做才能摆脱那个空间？

如果它是纯 CSS 并且不涉及 jQuery，那就太好了。

谢谢！

---

section {
  width: 8rem;
}

div {
  margin-top: 1rem;
}

.outer {
  background: blue;
  display: inline-flex;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
}

<section>
  <div class="outer">
    1
  </div>

  <div class="outer">
    Very very very long Textttttt
  </div>

  <div class="outer">
    1 (Something something)
  </div>

  <div class="outer">
    Test
  </div>
</section>