CSS: Wie man zuerst div im Container schrumpft anstatt außerhalb des Containers (zweiter Container sollte gleich nach dem ersten angezeigt werden)

Question

Ich habe ähnliche Frage hier gestellt: CSS: How to shrink first div in container instead of going outside of container, aber diese Frage ist schwieriger: Der Benutzer kann die Breite ändern Container, kann es kürzer sein als Platz für 3 Container benötigt. Was ich brauche, ist der erste Behälter zu schrumpfen, wenn eine solche Situation eintritt, auch der zweite Behälter sollte gleich nach dem ersten angezeigt werden. Hier erwartetes Ergebnis: "Erster div con ... Zweiter div Inhalt Dritter div Inhalt". Gibt es eine Möglichkeit, dies für alle modernen Browser zu tun? (neueste Chrome, Firefox und IE 11 benötigt). Hier HTML-Code aus Beispiel „https://plnkr.co/edit/9FGmNOHYxjtsQMUpeVfm?p=preview“:

<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

Es ist nicht wirklich klar, was Sie von dieser Frage allein sondern von den Einzelheiten der anderen Frage stellen scheint es immer noch, als ob Flexbox die Lösung, wie von 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