Как сделать текст резиновым по высоте и чтобы все другие блоки ориентировались по самому высокому?

Question

<section class="food">
    <div class="food__content">
        <div class="food__block">
            <div class="container">
                <div class="food__textbox">
                    <div class="food__line"></div>
                    <div class="food__title">ХОЛОДНЫЕ ЗАКУСКИ</div>
                </div>
            </div>
            <div class="food__slider">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="swiper__card">
                                <div class="swiper__img"><img src="img/sw_1.jpg" alt="Ягненок"></div>
                                <div class="swiper__textbox">
                                    <div class="swiper__info">
                                        <div class="swiper__name">Ягненок</div>
                                        <div class="swiper__weight">Вес: 225 г</div>
                                    </div>
                                    <div class="swiper__text">Фаршированный гречневой кашей,
                                        курагой, апельсином и зеленым яблоком</div>
                                    <div class="swiper__action">
                                        <div class="swiper__price">620 ₽</div>
                                        <button class="swiper__basket button">
                                            <div class="swiper__basket-text">В корзину</div>
                                            <div class="swiper__basket-icon"><img src="img/basket.svg" alt=""></div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="swiper__card">
                                <div class="swiper__img"><img src="img/sw_2.jpg" alt="Ягненок"></div>
                                <div class="swiper__textbox">
                                    <div class="swiper__info">
                                        <div class="swiper__name">Индейка</div>
                                        <div class="swiper__weight">Вес: 225 г</div>
                                    </div>
                                    <div class="swiper__text">Фаршированный гречневой кашей, 
                                        курагой, апельсином и зеленым яблоком</div>
                                    <div class="swiper__action">
                                        <div class="swiper__price">450 ₽</div>
                                        <button class="swiper__basket button">
                                            <div class="swiper__basket-text">В корзину</div>
                                            <div class="swiper__basket-icon"><img src="img/basket.svg" alt=""></div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="swiper__card">
                                <div class="swiper__img"><img src="img/sw_3.svg" alt="Ягненок"></div>
                                <div class="swiper__textbox">
                                    <div class="swiper__info">
                                        <div class="swiper__name">Гусь</div>
                                        <div class="swiper__weight">Вес: 225 г</div>
                                    </div>
                                    <div class="swiper__text">Фаршированный яблоками</div>
                                    <div class="swiper__action">
                                        <div class="swiper__price">7 900 ₽</div>
                                        <button class="swiper__basket button">
                                            <div class="swiper__basket-text">В корзину</div>
                                            <div class="swiper__basket-icon"><img src="img/basket.svg" alt=""></div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="swiper__card">
                                <div class="swiper__img"><img src="img/sw_4.jpg" alt="Ягненок"></div>
                                <div class="swiper__textbox">
                                    <div class="swiper__info">
                                        <div class="swiper__name">Утка</div>
                                        <div class="swiper__weight">Вес: 225 г</div>
                                    </div>
                                    <div class="swiper__text">Фаршированная рисом, курагой и айвой</div>
                                    <div class="swiper__action">
                                        <div class="swiper__price">3 230 ₽</div>
                                        <button class="swiper__basket button">
                                            <div class="swiper__basket-text">В корзину</div>
                                            <div class="swiper__basket-icon"><img src="img/basket.svg" alt=""></div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

.swiper {
    color: #fff;
    max-width: 1440px;

    &__card {
        max-width: 325px;
        height: 385px;
        background: linear-gradient(90deg, #494544 0%, #504B4A 100%);
        border-radius: 10px;
        overflow: hidden;
    }

    &__img {
    
    }

    &__textbox{
        padding: 16px;
        display: flex;
        flex-direction: column;
    }

    &__info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    &__name {
        font-weight: 700;
        font-size: 22px;
        line-height: 1.227;
    }

    &__weight {
        font-weight: 400;
        font-size: 12px;
        line-height: 1.166;
    }

    &__text {
        max-width: 250px;
        color: $text;
        font-weight: 400;
        font-size: 13px;
        line-height: 1.307;
    }

    &__action {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &__price {
        font-weight: 600;
        font-size: 20px;
        line-height: 1.2;
    }

    &__basket {
        display: flex;  
        align-items: center;
        gap: 12px;
        transition: all 0.2s ease;

        &:hover{
            box-shadow: 0px 5px 10px rgba(114, 163, 121, 0.7);
        }
    }

    &__basket-text {
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.214;
    }

    &__basket-icon {
    }
}

Нашел способ с flex: 1 1 auto. Но так как я обернул контент под картинкой в общий блок для padding-а этот способ я применить не смог. Помогите

Answer 1

Добавьте

.swiper__card {
    display: flex;
    flex-direction: column;
    align-content: stretch;
}
.swiper__textbox {
    flex-grow: 1;
}
.swiper__text {
    flex-grow: 1;
}

БЛОГ НА HUSL

Как сделать текст резиновым по высоте и чтобы все другие блоки ориентировались по самому высокому?

Ответы (1 шт):