Flexbox在第二个之前椭圆化第一个孩子

Question

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

演示：

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

last-of-type 标题上的 flex-shrink: 0 似乎没有任何作用，最后一个子元素始终是椭圆形的。

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

这是一个小提琴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;
}

小提琴：https://jsfiddle.net/6nbzkkjg/4/

编辑：更新了 @Andrew 在 cmets 中的修改

Answer 2

似乎您可以通过将flex: 1; 添加到.title {} 来实现此目的。如果将宽度更改为 400px（例如），您可以看到第二个 div 仍然会以省略号截断，但第一个 div 会先截断。

.search-bar {
    display: flex;
    overflow: hidden;
    width: 500px;
    background: #cfcfcf; /* Changed for visibility in Stack Snippet */
}

.title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    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
    </div>
</div>

我从.search-bar {} 中删除了flex: 1; 和align-content: center;，因为它们没有做任何事情。