Flex: quando il testo è troppo lungo per entrare in una nuova riga

Question

Stavo pensando se è possibile ottenere il seguente utilizzando css flexbox.

Nel layout, ci sono 2 div originali una accanto all'altra. Quello a sinistra contiene un gruppo di icone e ha una larghezza fissa. Quello di destra contiene testo, che può essere potenzialmente piuttosto lungo.

C'è un modo, come fare usando solo CSS (soprattutto FlexBox), che quando il testo è troppo lungo, il div si romperà sulla nuova linea (sotto prima div)?

Controllare l'immagine seguente.

Answer 1

È possibile eseguire questa operazione creando un contenitore con display: flex; e flex-wrap: wrap;. Poi dare il testo in eccesso un 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