是否可以缩小内部嵌套的flex项而不是让它溢出父项？

Question

我已经嵌套了这样的flex项目（https://jsfiddle.net/e1bm2s2x/1）：

当你缩小外部容器的宽度时（我拖动JSFiddle窗格的宽度），container-2首先收缩，文本溢出椭圆。这就是我想要的。但随后它停止收缩并溢出父容器。我希望container-2继续缩小而不是溢出container-1。我玩了很多但是无济于事。这可能吗？

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  align-items: center;
}

.container-1 {
  border: 3px solid orange;
}

.container-2 {
  border: 3px solid green;
  flex: 1 1 0;
}

.content {
  flex: 1 1 0;
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixed {
  flex: 0 0 50px;
  border: 3px solid brown;
}

＆＃13;

<div class="container container-1">
  <div class="fixed">
    left
  </div>
  <div class="container container-2">
    <div class="content">
      words words words words words words words
    </div>
    <button class="fixed">
      right
    </button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;