html - CSS flex 盒 : shrink along cross axis and show scrollbar

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>