CSS: Wie man das erste div im Container schrumpft, anstatt außerhalb des Containers zu gehen

Question

Der Benutzer kann die Breite des Containers ändern, er kann kürzer sein als der für beide Container benötigte Platz. Was ich brauche, ist der erste Behälter zu schrumpfen, wenn eine solche Situation eintritt. Hier erwartetes Ergebnis: "Erster div con ... Zweiter 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/rH3ABKvFRltvAL1rXqkr?p=preview":

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

Answer 1

können Sie Flexbox verwenden:

.container { 
 
    background-color: gray; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    overflow-x: hidden; 
 
    white-space: nowrap 
 
} 
 
.first { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

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