CSS: Konteynırın dışına çıkmak yerine konteynerde ilk div küçültmek (ikinci kap ilk denemeden sonra gösterilmelidir)

Question

Ben de benzer bir soru sordum: CSS: How to shrink first div in container instead of going outside of container, ancak bu soru daha zor: Kullanıcı genişliğini değiştirebilir konteyner, 3 kap için gerekli alandan daha kısa olabilir. İhtiyacım olan şey, eğer böyle bir durum meydana gelirse, ilk konteynırı daraltır, ayrıca ilk konteynırdan sonra ikinci konteyner de gösterilmelidir. Burada beklenen sonuç: "İlk div con ... İkinci div içeriği Üçüncü div içeriği". Tüm modern tarayıcılar için bunu yapmanın bir yolu var mı? (en son Chrome, Firefox ve IE 11 gerekli). "https://plnkr.co/edit/9FGmNOHYxjtsQMUpeVfm?p=preview" örnekten İşte html kodu: tarif ettiği FlexBox çözümdür sanki

<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

Gerçekten net değil ne yalnız bu soruya gelen ancak diğer soruya ayrıntılarından soruyorsun hala görünüyor

.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

Oriol