フレックス：テキストが長すぎると新しい行になる

Question

フレックスボックスを使用して次のように達成することができたら、私は考えていました。

レイアウトには、オリジナルの2 divが隣り合っています。左にはアイコンのグループが含まれ、幅は固定されています。右のものにはテキストが含まれている可能性があります。

どうすればいいですか？css（特にflexbox）、テキストが長すぎるとdivが新しい行（最初のdivの下）に壊れますか？

次の画像を確認してください。

Answer 1

display: flex;とflex-wrap: wrap;のコンテナを作成すると、これを行うことができます。そして、オーバーフローテキストに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