有没有什么原因让你把文本 Package 在这么多div中？因为你现在的问题是，从技术上讲，文本并没有溢出，而是 Package 器div溢出了。如果你只是把flex-child long-and-truncated Package 在flex-parent-parent-parent中，文本溢出就像你期望的那样工作。

这是由于flex项目的自动最小大小。有一个excellent answer explaining this behavior，它说：
如果你在HTML结构的多个层次上处理flex项，可能需要覆盖默认的min-width：自动/最小高度：在更高级别的项目上自动。
基本上，具有最小宽度的更高级别的flex项：auto可以防止缩小下面嵌套的具有最小宽度的项目：0.
你需要在链上的每个flex容器上以某种方式覆盖min-width。它不一定是0，除了auto之外的任何值。例如：

body {
  width: 400px;
}

.flex-parent,
.flex-parent-parent,
.flex-parent-parent-parent {
  display: flex;
  padding: 10px;
  border: solid;
  min-width: 200px;
}

.flex-parent {
  min-width: 0;
}

.long-and-truncated {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="flex-parent-parent-parent">
  <div class="flex-parent-parent">
    <div class="flex-parent">
      <div class="flex-child long-and-truncated">
    1. This is a long string that is OK to truncate please and thank you
      </div>
    </div>
  </div>
</div>

在我的示例中，我将所有flex容器设置为具有相同的min-width值，但这不是必需的。您可以根据布局中的需要将每个容器设置为唯一的。

.flex-parent { min-width: 0; }
.flex-parent-parent { min-width: 100px; }
.flex-parent-parent-parent { min-width: 400px; }

还有一种方法可以实现这种行为，但仍然涉及所有嵌套的Flex容器：

.flex-parent,
.flex-parent-parent,
.flex-parent-parent-parent {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
}

通过在每个嵌套的flex容器上设置min-width和/或max-width的组合，您应该能够使文本被截断。