Use ellipsis to the minimum width, then wrap on the next line

Question

I would like to make a row consisting of three columns, where the left column is always left and the right two columns are connected together (i.e. wrap along with the next row if there is not enough space). This is easily achievable with flex and might look like this: https://jsfiddle.net/znxn9x1r/

The trick is that I would like the middle column (purple color always-right/left) to be seated to some min-widthusing text-overflow: ellipsis. This means that when I start lowering the width of the page, the middle column should first start to shrink, and only after this becomes impossible, then the two right columns should be moved to the next row.

Layout of what I want to achieve:

Then, when the compression reaches the min-widthmiddle column, it should be moved to the next row, as before:

Now, if there was no left yellow column, and the entire row consisted of only two right columns, I could use the answer from the following question: How to save the flex element from overflowing due to its text?

It really behaves as it should, but only after the right-wing group is already wrapping:

It does not compress the middle column when it is still in the same row as the first yellow column:

^^ This should not be enough space for ellipsis!

Here is my code, is it possible to achieve what I want with pure HTML / CSS?

* {
  padding: 5px;
}
#container {
  background-color: lightgreen;
  display: flex;
  flex-wrap: wrap;
}
#always-left {
  background-color: yellow;
  margin: auto;
  margin-left: 0;
}
#right-group {
  margin: auto;
  margin-right: 0;
  display: flex;
}
#shrinkable {
  background-color: violet;
  vertical-align: middle;
  order: 1;
  flex: 0 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#not-shrinkable {
  background-color: lightblue;
  vertical-align: middle;
  order: 2;
  flex: 1 0 auto;
}

<div id="container">
  <div id="always-left">
    always-left
  </div>
  <div id="right-group">
    <div id="shrinkable">
      always-right / left
    </div>
    <div id="not-shrinkable">
      always-right / right
    </div>
  </div>
</div>

Run codeHide result

https://jsfiddle.net/mnmyw245/

Answer 1

, , flex-wrap: wrap flex.

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

.

, , , wrap -.

.

:

@media ( max-width: 200px ) {
  #container { flex-wrap: wrap; }
}