css - 拥有 flex-parent 会破坏单项 flex 布局

Question

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

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

我很难理解为什么只有一个 flex parent - 会破坏所引用问题中建议的完美布局。

预期行为:文本将被剪切，为远端的表情符号留出空间。没有水平滚动。

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

此外，请注意，理解为什么 wrapping 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>

flex-shirnk 在这里也没有任何效果。

Answer 1

从第一个 div 中删除 style="display:flex"。

然后在第一个 .icon 上添加一个 margin-left: auto ，这样当文本不多时，红色圆圈就在右边。

body {
  margin: 0;
}

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

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

.icon {
  flex: 0 0 auto;
}
.push {
  margin-left: auto;
}

<div>
  <div class="single-flex">
    <span>hello hello </span>
    <span class="icon push">🛑</span>
    <span class="icon">🛑🛑</span>
  </div>
</div>

<div>
  <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 </span>
    <span class="icon push">🛑</span>
    <span class="icon">🛑🛑</span>
  </div>
</div>