CSS Flexbox：沿横轴收缩并显示滚动条 [英] CSS Flexbox: shrink along cross axis and show scrollbar

问题描述

在我的网站上，我有一个带有图像的flexbox容器（固定的宽度和高度）和旁边的文本（没有固定的宽度）。我怎样才能防止文字高于图像，并显示更高的滚动条。

示例：

< article class = 配方-文章 > < img class =recipe-imgsrc =width =265height =265> < section class =recipe-text> < p为H.名称< / p为H. < p为H.;< / p为H. < p为H. *****< / p为H. < p>成分1，成分2< / 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。在vero eos et accusam et justo duo dolores et ea rebum。没有海takimata sanctus est Lorem ipsum dolor坐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。在vero eos et accusam et justo duo dolores et ea rebum。没有海，没有海，没有海。 < /节> < / article>

解决方案

<以下是您的解决方案。 overflow-y：auto; 到 .recipe-text 会使文字滚动。

  .recipe-article {display：flex;}。recipe-img {flex：0 0 265px;}。 max-height：265px; overflow-y：auto;}   
 < article class = 配方-文章 > < img class =recipe-imgsrc =width =265height =265> < section class =recipe-text> < p为H.名称< / p为H. < p为H.;< / p为H. < p为H. *****< / p为H. < p>成分1，成分2< / 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。在vero eos et accusam et justo duo dolores et ea rebum。没有海takimata sanctus est Lorem ipsum dolor坐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。在vero eos et accusam et justo duo dolores et ea rebum。没有海，没有海，没有海。 < /节> < / article>  

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>

解决方案

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>

这篇关于CSS Flexbox：沿横轴收缩并显示滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！