css - Flexbox 在第二个 child 之前椭圆化第一个 child

Question

我有一个 flex-box 容器 (.search-bar)，里面有两个包含文本的 div (.title)。我希望第二个 child 占据所有额外的空间，并在空间变得有限时成为最后一个椭圆形的 child 。即第一个 child 应该根据需要椭圆化以保持第二个 child 完全显示，第二个 child 应该只在第一个 child 不再可见时椭圆化。

演示:

.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>

最后一个类型标题上的 flex-shrink: 0 似乎没有做任何事情，最后一个 child 总是被省略的。

有没有办法让第一个标题在第二个之前变成椭圆？

这是一把 fiddle https://jsfiddle.net/6fs9gc00/

Answer 1

这似乎是可行的

.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/

编辑:更新了@Andrew 在评论中的修改