使用flexbox将项目保留在包装列表的第一行

我需要创建具有以下功能的行布局:

行中的第一项具有最小大小,但会扩展以填充任何未使用的空间。

不管动态元素是否已包装到新行,有一个元素应始终位于顶行的右端。

以下是使用flexbox时可能出现的情况:

<div id="container">
  <div id="start-item">start item</div>
  <div id="end-item">end item</div>
  <div class="dynamic-items">
    <div class="dynamic-item">these</div>
    <div class="dynamic-item">are</div>
    <div class="dynamic-item">dynamic</div>
    <div class="dynamic-item">items</div>
  </div>
</div>

CSS:

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.dynamic-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}

#start-item {
  flex-grow: 1;
}

#end-item {
  order: 0; // works for single line

  // works for wrapped lines
  margin-left: auto;
  order: 1;
}

有一个问题,那就是我只能把结束按钮放在正确的位置,如果它在动态项之后,如果行被包装,如果所有的东西都在一行上,它在动态项之前。您可以在这个JSFIDLE中看到这一点: http://jsfiddle.net/bgmort/6zkxmrj0/

我加入了一个切换顺序的复选框——如果行未包装,则未选中状态将给出所需的结果,如果行已包装,则选中状态将给出所需的结果。

我怎样才能使这两种情况都适用?