具有flex-grow的元素：1不缩小以适合容器大小

Question

正如您所看到的in this fiddle，我们在弹性行中显示了两个元素。一个元素包含文本，并且应尽可能增长，因此flex-grow: 1。另一个元素应始终保持在右侧并尽可能少地占用空间，因此flex-shrink: 1。

这很有效，但有时，当第一个元素包含很长的文本时，整体弹性大小超过了父容器的大小。我无法理解为什么浏览器不会以不同方式破坏文本。

该问题可以通过Firefox重现。

有没有一种优雅的方法来解决这个问题？