text-overflow ellipsis not working in nested flexbox

The values of :

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

Will work only if the content of your element exceeds it's width.

You can set the width of .header .content:

.header .content {
    width: 50%;
}

And it will work as you expect it to:
http://jsfiddle.net/t82pqks4/

There are two issues in your code preventing the ellipsis from working:

1. div.right contains div.header, which in turn contains the button and text.

   div.right is a flex item in the main container (.container).

   By default, a flex item cannot be smaller than the size of its content. The initial setting on flex items is min-width: auto.

   This means that the length of your text, which is not wrapping, will set a minimum size for parent flex items. One way to enable flex items to shrink past their content is to set a flex item to min-width: 0.

   You've done this already for the .content flex item, but it needs to be set on the .right item, as well.

2. You've got the .content element set to flex: 0 1 auto.

   This tells the flex item to use the size of the content (flex-basis: auto). The text sets the size.

   Instead, set the width to 0 and let the flex container distribute space, as necessary. You can do this with flex: 1 1 0, which is the same as 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;
}

<div class="container">

  <div class="left">
    content left
  </div>
  <div class="right">
    <div class="header">
      <div class="buttons">buttons</div>
      <div class="content">
        This content is really long and should wrap with ellipses, but for some reason it doesn't work when it's nested in a container with display: flex
      </div>
      <div class="buttons">buttons</div>
    </div>
    content right
  </div>

</div>

revised fiddle