Html 使用省略号直到最小宽度，然后换行到下一行

我想制作一个由三列组成的行，其中左列始终位于左侧，右两列连接在一起（即，如果没有足够的空间，则换行到下一行）。使用flex很容易做到这一点，可能如下所示：

这里的问题是，我还希望使用

文本溢出：省略号
将中间列（紫色
始终为右/左
）缩小到一些
最小宽度
。这意味着，当我开始降低页面的宽度时，中间的列应该首先开始收缩，只有在不再可能收缩后，右边的两列应该换行到下一行

我想要实现的目标的模型：


然后，当收缩达到中间列的
最小宽度
时，它应像前面一样缠绕到下一行：


现在，如果没有左边的黄色列，整行仅由右边的两列组成，我可以使用以下问题的答案：

这实际上是正常的，但只有在正确的组已包装之后：


当中间列仍与第一个黄色列在同一行时，它不会收缩中间列：


^^这不应该发生，因为有足够的空间放省略号

这是我的代码，是否可以用纯HTML/CSS实现我想要的


*{
填充物：5px；
}
#容器{
背景颜色：浅绿色；
显示器：flex；
柔性包装：包装；
}
#总是离开{
背景颜色：黄色；
保证金：自动；
左边距：0；
}
#右派{
保证金：自动；
右边距：0；
显示器：flex；
}
#收缩的{
背景色：紫罗兰色；
垂直对齐：中间对齐；
顺序：1；
flex:01自动；
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
}
#不缩水{
背景颜色：浅蓝色；
垂直对齐：中间对齐；
顺序：2；
弹性：10自动；
}

总是离开
总是右/左
总是对的
一种可能适用于您的方法是禁用flex容器上的
flex wrap:wrap

#container {
  background-color: lightgreen;
  display: flex;
  /* flex-wrap: wrap;        <-- REMOVE THIS */
}

这当然是一种有效的方法，但需要手动设置断点，因此该方法与内容之间不是动态的。但是，如果没有人提出更好的解决方案，这可能意味着没有可用的CSS解决方案，我将接受您的回答。：）
@media ( max-width: 200px ) {
  #container { flex-wrap: wrap; }
}