CSS Flexbox：沿横轴收缩并显示滚动条答案

【问题标题】：CSS Flexbox: shrink along cross axis and show scrollbarCSS Flexbox：沿横轴收缩并显示滚动条
【发布时间】：2015-07-26 00:15:21
【问题描述】：

在我的网站上，我有一个 flexbox 容器，里面有一个图像（固定宽度和高度）和旁边的文本（没有固定宽度）。如何防止文本高于图像并在更高时显示滚动条。另请参阅下面的代码 sn-p。

示例：

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

【问题讨论】：

标签： html css overflow flexbox

【解决方案1】：

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

【讨论】：

【解决方案2】：

将overflow: auto; 分配给.recipe-text 类。检查小提琴

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

【讨论】：

【解决方案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>

【讨论】：

好的，这是max-height: 265px; AND overflow: scroll的组合