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

是这样的吗？ https://fiddle.jshell.net/hzsjLnj1/ 只需添加一个 overflow auto

Answer 2

将 overflow: auto; 交给 .recipe-text class。检查 fiddle

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

Answer 3

以下是适合您的解决方案。 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>

CSS Flexbox：沿交叉轴收缩并显示滚动条

CSS Flexbox: shrink along cross axis and show scrollbar

html

css

overflow

flexbox