使用flex-parent会破坏单项Flex布局

Question

进一步扩大这个最近的问题：

When using `nowrap` within a flex row, avoid pushing the last elements off the screen

我很难理解为什么有一个flex父 - 破坏了引用问题中建议的其他完美布局。

预期的行为：文本将被剪切，为远方的表情符号提供空间。没有水平滚动。

请尝试打开和关闭flex属性以了解行为。

此外，请注意理解包装柔性为何会破坏布局，这是我在这个问题中的主要目标。所以解决它是不够的。

有没有办法解决这种行为没有奇怪的解决方案，如flex-direction: column？

body {
  margin: 0;
}

.single-flex {
  display: flex;
  justify-content: space-between;
}

span {
  white-space: nowrap;
  overflow: hidden;
}

.icon {
  flex: 0 0 auto;
}

<div style="display:flex">
  <div class="single-flex">
    <span>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </span>
    <span class="icon">🛑</span>
    <span class="icon">🛑🛑</span>
  </div>
</div>

qazxsw poi在这里也没有任何影响。