如何使孩子不擴大柔性容器父母的寬度？

我在容器上使用display：flex，並且有一個子標題定義了它的寬度。我希望它下面有一段文字，但我不希望該段落拉伸flex容器的寬度。我怎樣才能做到這一點？如何使孩子不擴大柔性容器父母的寬度？

.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>

來源

2017-02-20 Hrodebert

代替'彎曲的：0 0 auto'，你有沒有試過'柔性：0 1 auto'？ –

這將使標頭的分界線太多，這是不是我想要的。 – Hrodebert

給'p'元素一個大的'margin'。你也可以把'p'元素放在它自己的'div'中，寬度設置爲'div'margin''0 auto' – Firearrow5235

把的100 .right和空白誇張的彎曲收縮值：在標題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>

來源

2017-02-20 03:45:26 Hrodebert

如何使孩子不擴大柔性容器父母的寬度？

回答

相關問題