CSS Flexbox: shrink along cross axis and show scrollbar

问题

On my website I have a flexbox container with an image in it (fixed width and height) and a text beside it(no fixed width). How can I prevent the text being from being higher than the image and show a scrollbar when it's higher. Please see also code snippet below.

Example:

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

回答1:

Following is the solution for you. overflow-y: auto; to .recipe-text will make text scrollable.

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

回答2:

Something like this? https://fiddle.jshell.net/hzsjLnj1/ Just add a overflow auto

回答3:

Give overflow: auto; to .recipe-text class. Check the fiddle

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

来源：https://stackoverflow.com/questions/30236336/css-flexbox-shrink-along-cross-axis-and-show-scrollbar