Flex: Kiedy tekst zbyt długo włamuje się do nowej linii

Question

Zastanawiałem się, czy można osiągnąć następujące korzyści przy użyciu css flexbox.

W układzie znajdują się oryginalne 2 elementy div obok siebie. Lewa zawiera grupę ikon i ma stałą szerokość. Prawy zawiera tekst, który może być potencjalnie dość długi.

Czy istnieje sposób, aby użyć tylko css (szczególnie flexbox), że gdy tekst jest zbyt długi, div zostanie podzielony na nową linię (pod pierwszym div)?

Sprawdź następujące zdjęcie.

Answer 1

Możesz to zrobić, tworząc kontener z display: flex; i flex-wrap: wrap;. Następnie nadać tekstowi przepełnienia flex-grow: 1;

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: center; 
 
} 
 

 
.fixed-width { 
 
    width: 200px; 
 
    border: 1px solid red; 
 
} 
 

 
.fixed-width, 
 
.overflow-text { 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 

 
.overflow-text { 
 
    flex-grow: 1; 
 
    border: 1px solid red; 
 
}

<div class="container"> 
 
    <div class="fixed-width"> 
 
    <p>Hi</p> 
 
    <p>Hi</p> 
 
    <p>Hi</p> 
 
    <p>Hi</p> 
 
    </div> 
 
    <div class="overflow-text"><p>This is some text that is really long.</p></div> 
 
</div>

JSFiddle