您的代码中存在两个问题，导致省略号无法工作：

1. div.right包含div.header，后者又包含按钮和文本。
   div.right是主容器（.container）中的一个flex项。
   默认情况下为a flex item cannot be smaller than the size of its content。Flex项目的初始设置为min-width: auto。
   这意味着文本的长度（不换行）将为父Flex项设置最小大小。一种使flex项缩小到其内容之外的方法是将flex项设置为min-width: 0。
   您已经为.content flex项完成了这一操作，但是还需要在.right项上进行设置。
   1.您已经将.content元素设置为flex: 0 1 auto。
   这告诉flex项使用内容的大小（flex-basis: auto）。文本设置大小。
   相反，将宽度设置为0，并根据需要让Flex容器分配空间。您可以使用flex: 1 1 0执行此操作，它与flex: 1相同。

.container {
  display: flex;
  height: 100vh;
}
.left {
  width: 200px;
  background-color: yellow;
}
.right {
  flex: 1;
  background-color: blue;
  color: white;
  min-width: 0;             /* NEW */
}
.header {
  background: red;
  color: white;
  display: flex;
  flex-direction: row;
}
.header .content {
  white-space: nowrap;
  flex: 1;                  /* ADJUSTMENT */
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
}
.header .buttons {
  background: green;
  flex: 1 0 auto;
}
.header .content:hover {
  white-space: normal;
}

个字符
revised fiddle的

的值：

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

字符串
只有当元素的内容超过其宽度时才有效。
您可以设置.header .content的宽度：

.header .content {
    width: 50%;
}

型
它会像你期望的那样工作：
http://jsfiddle.net/t82pqks4/

上面的解决方案对我来说在一个非常嵌套的Flex布局中不起作用。它一直使我的h3标记比父标记宽，因为

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

字符串
但我意外地发现，将display: inline-grid;添加到父级解决了这个问题，并正确地应用了省略号。
我不知道这对你有没有帮助，但对我有帮助。

我希望这个解决方案能帮助到一些人，因为我发现没有其他方法可以工作，因为我的页面是一个巨大的flexbox嵌套组合。所以min-width 0不起作用，除了这个，我什么都没试过。
在包含要换行的副本的flex列中，您需要执行此操作。

.row {
  display: flex;
}
.col1 {
 position: relative;
 flex: 1 1 70%;
 overflow: hidden;
}
.nested {
  width: 100%;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col2 {
  flex: 1 1 30%;
  padding-left: 1rem;
}

个字符