CSS Flexbox：沿橫軸收縮並顯示滾動條

Question

在我的網站上，我有一個帶有圖像（固定寬度和高度）和其旁邊的文本（沒有固定寬度）的flexbox容器。如何防止文字高於圖像，並在滾動條更高時顯示滾動條。請參閱下面的代碼片段。

例子：

.recipe-article{ 
 
    display: flex; 
 
} 
 

 
.recipe-img { 
 
    flex: 0 0 265px; 
 
} 
 

 
.recipe-text{ 
 
    flex: 1; 
 
    max-height: 265px; 
 
}

<article class="recipe-article"> 
 
        <img class="recipe-img" src="" width="265" height="265"> 
 
        <section class="recipe-text"> 
 
         <p>Name</p> 
 
         <p></p> 
 
         <p>*****</p> 
 
         <p>Ingredient1, Ingredient2</p> 
 
         <p>Süß, Cremig</p> 
 
         <p>Zubereitung: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
        </section> 
 
       </article>

Answer 1

以下是你的解決方案。 overflow-y: auto;到.recipe-text將使文本可滾動。

.recipe-article{ 
 
    display: flex; 
 
} 
 

 
.recipe-img { 
 
    flex: 0 0 265px; 
 
} 
 

 
.recipe-text{ 
 
    flex: 1; 
 
    max-height: 265px; 
 
    overflow-y: auto; 
 
}

<article class="recipe-article"> 
 
        <img class="recipe-img" src="" width="265" height="265"> 
 
        <section class="recipe-text"> 
 
         <p>Name</p> 
 
         <p></p> 
 
         <p>*****</p> 
 
         <p>Ingredient1, Ingredient2</p> 
 
         <p>Süß, Cremig</p> 
 
         <p>Zubereitung: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
        </section> 
 
       </article>

Answer 2

像這樣的事情？ https://fiddle.jshell.net/hzsjLnj1/ 只需添加一個overflow auto

Answer 3

給overflow: auto;到.recipe-text類。檢查小提琴

http://jsfiddle.net/shubhambhave/86hjc632/