Flexbox ellipsize first child before second

Question

I'm have a flex-box container (.search-bar) with two text-containing divs (.title) inside. I want the second child to take up all extra space and be the last to ellipsize as space becomes limited. i.e. the first child should ellipsize as necessary to keep the second child fully shown, and the second child should only ellipsize once the first child is no longer visible.

Demo:

.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 500px;
  background: white;
}

.title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 1;
}

.title:last-of-type {
  flex: 1;
  flex-shrink: 0;
}

.title + .title::before {
  content: '>';
  margin: 0 10px;
}

<div class='search-bar'>
  <div class='title'>
  Doop Doop Doop Doop Doop Doop Doop
  </div>
  <div class='title'>
  Doge Doge Doge Doge Doge Doge Doge
  </div>
</div>

The flex-shrink: 0 on the last-of-type title doesn't seem to do anything, and the last child is always the one that is ellipsized.

Is there a way to have the first title ellipsize before the second?

Here's a fiddle https://jsfiddle.net/6fs9gc00/

Answer 1

This seems to do it

.title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.title.first {
  flex: 0 1 auto;
}
.title.last {
  flex: 1 0 auto;
}

fiddle: https://jsfiddle.net/6nbzkkjg/4/

Edit: updated with @Andrew's modifications in comments