子供がフレックスコンテナの親の幅を拡張しないようにする方法は？

Question

私はdisplay：flexをコンテナに使い、その子の見出しに幅を定義させます。その下にいくつかの段落テキストが欲しいですが、その段落がフレックスコンテナの幅を広げることは望ましくありません。どうすればこれを達成できますか？ .RIGHTと白のスペースに100の誇張されたフレックスシュリンク値を置く

.main { 
 
\t display:flex; 
 
\t position:relative; 
 
\t width:100%; 
 
} 
 

 
.left { 
 
\t position:relative; 
 
\t width:100%; 
 
} 
 

 
.right { 
 
\t flex:0 0 auto; 
 
\t position:relative; 
 
}

<div class='main'> 
 
    <div class='left'> 
 
    <h1>SOME TITLE</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo pretium dolor, non vestibulum erat ullamcorper a. Cras ac bibendum nibh. Sed eget lectus quis lorem tempus pulvinar.</p> 
 
    </div> 
 
    <div class='right'> 
 
    <h1>ANOTHER TITLE</h1> 
 
    <p>This paragraph should break into lines and expand vertically instead of stretching the parent div horizontally.</p> 
 
    </div> 
 
</div>

Answer 1

：見出しのNOWRAPはトリックをしました。 Michael_Bに感謝します。代わりに、 `フレックスの

.main { 
 
\t display:flex; 
 
\t position:relative; 
 
\t width:100%; 
 
} 
 

 
.left { 
 
\t position:relative; 
 
\t width:100%; 
 
} 
 

 
.right { 
 
\t flex:0 100 auto; 
 
\t position:relative; 
 
} 
 

 
.right h1 { 
 
    white-space:nowrap; 
 
}

<div class='main'> 
 
    <div class='left'> 
 
    <h1>SOME TITLE</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo pretium dolor, non vestibulum erat ullamcorper a. Cras ac bibendum nibh. Sed eget lectus quis lorem tempus pulvinar.</p> 
 
    </div> 
 
    <div class='right'> 
 
    <h1>ANOTHER TITLE</h1> 
 
    <p>This paragraph should break lines and expand vertically instead of stretching the parent div horizontally.</p> 
 
    </div> 
 
</div>