Flex: Wenn Text zu lange in neue Zeile einbricht

Question

Ich dachte, wenn es möglich ist, folgende mit css flexbox zu erreichen.

Im Layout gibt es original 2 div nebeneinander. Die linke enthält eine Gruppe von Symbolen und hat eine feste Breite. Die rechte enthält Text, der möglicherweise sehr lang sein kann.

Gibt es einen Weg, wie man mit nur css (besonders flexbox), dass, wenn der Text zu lang ist, das div auf die neue Zeile (unter ersten div) brechen wird?

Überprüfen Sie das folgende Bild.

Answer 1

Sie können dies tun, indem Sie einen Container mit display: flex; und flex-wrap: wrap; erstellen. Dann geben der Überlauftext ein 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