nowrap in flex in flex

text-overflow:ellipsis isn't working for the red box (despite the min-width:0 trick).

HTML

<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>

CSS

.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;           /* ADJUSTED */
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
}

.header .buttons {
    background: green;
    flex: 1 0 auto;
}

.header .content:hover{
    white-space:normal;
}