Esnek: Metin çok uzun bir süre yeni satırlara bölünür

Question

Aşağıdakileri kullanarak css flexbox kullanarak mümkün olup olmadığını düşünüyorum.

Düzende, birbirinin yanında orijinal 2 div var. Soldaki simgeler grubunu içerir ve sabit bir genişliğe sahiptir. Sağdaki, oldukça uzun olabilecek bir metin içeriyor.

yalnızca css (özellikle flexbox) kullanarak nasıl yapılacağının bir yolu var, metin çok uzun olduğunda, div yeni satıra (ilk div altında) kırılacak?

Aşağıdaki resmi kontrol edin.

Answer 1

Bunu, display: flex; ve flex-wrap: wrap; ile bir kap oluşturarak yapabilirsiniz. Sonra 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