CSS：如何缩小容器中的第一个div而不是走出容器（第二个容器应该在第一个之后显示）

Question

我在这里问了类似的问题：CSS: How to shrink first div in container instead of going outside of container，但这个问题更难：用户可以更改容器的宽度，它可以比3个容器所需的空间短。我需要的是收缩第一个容器，如果发生这种情况，第二个容器应该在第一个之后显示。这里预期的结果：“第一个div con ...第二个div内容第三个div内容”。是否有可能为所有现代浏览器做到这一点？ （需要最新的Chrome，Firefox和IE 11）。这里是来自示例“https://plnkr.co/edit/9FGmNOHYxjtsQMUpeVfm?p=preview”的html代码：

<div class="container">
  <div class="first">First div content</div>
  <div class="second">Second div content</div>
  <div class="third">Third div content</div>
</div>

Answer 1

从单独的这个问题你所要求的并不是很明确但是从另一个问题的细节来看，似乎仍然是按照Oriol所描述的方式展示解决方案

.container {
  background-color: gray;
  display: flex;
  overflow-x: hidden;
  white-space: nowrap;
  justify-content: space-between;
}
.first {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1em;
  border: 1px solid red;
}
.third {
  flex: 1;
  text-align: right;
  background:pink;
}

<div class="container">
  <div class="first">first div content</div>
  <div class="second first">second div content</div>
  <div class="third">third div content</div>
</div>

JSfiddle Demo