Вертикально выровняйте несколько div рядом с адаптивным изображением

Question

У меня есть строка с двумя столбцами внутри.Слева изображение.Справа - три элемента: первый с изменяемой длиной текста, второй с фиксированными элементами, третий с изображением, видимым только на настольном устройстве.

80% раз текст в первом div будет настолько коротким, что второй и третий будут иметь высоту, меньшую, чем изображение слева.Как я могу сделать так, чтобы второй div и третий выравнивались по нижней части изображения?

Это пример макета, который мне удалось получить только с двумя делениями:

<style>
  .row {
    display: flex;
    flex-wrap: wrap;
  }

  .flex-container1 {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    justify-content: center;
    margin-left: 10px;
    height: 80%;
  }
  .flex-container2 {
    display: flex;
    flex-wrap: wrap;
    align-content: end;
    justify-content: left;
    margin-left: 10px;
    height: 20%;
  }
</style>

<div class="row">

    <!-- LEFT COLUMN -->

    <div class="wpb_column 
                vc_column_container 
                vc_col-sm-6 
                vc_col-has-fill"
    >
        <a 
            href= "<?php echo get_post_meta(
                $post->ID, 
                'rehub_offer_product_url', 
                true
            );?>" 
            target="_blank" 
            rel="nofollow" 
            class="
                vc_single_image-wrapper 
                vc_box_border_grey
            "
        >
            <?php
                WPSM_image_resizer::show_static_resized_image([
                    'thumb'=> true,
                    'crop'=> true,
                    'width'=> 800,
                    'height'=> 800,
                    'no_thumb_url' => 
                        get_template_directory_uri()
                        .'/images/default/noimage_765_460.jpg'
                ]);
            ?>
        </a>
    </div>

    <!-- RIGHT COLUMN -->

    <div class="wpb_column vc_column_container vc_col-sm-6">
        <div class="flex-container1">
            <div 
                id="wpsm-title-5b051fde62ff6" 
                class="
                    wpsm-title 
                    big-size-title  
                    left-align-title 
                    under-title-line
                "
            >
                <style scoped="">
                    #wpsm-title-5b051fde62ff6 
                    h5{color:#020000;}
                </style>
                <h1>
                    <?php the_title(); ?>
                </h1>
            </div>
            <article class="wpb_text_column post wpb_content_element ">
                <div class="wpb_wrapper">
                    <p>
                        <span 
                            data-sheets-value="{
                                &quot;1&quot;:2,
                                &quot;2&quot;:&quot;<?php echo get_post_meta(
                                    $post->ID, 
                                    'rehub_offer_product_desc', 
                                    true
                                );?>&quot;
                            }" 
                            data-sheets-userformat="{
                                &quot;2&quot;:513,
                                &quot;3&quot;:[null,0],
                                &quot;12&quot;:0}"><?php echo get_post_meta(
                                    $post->ID, 
                                    'rehub_offer_product_desc', 
                                    true);
                                ?>
                        </span>
                    </p>
                </div>
            </article>
        </div>

        <div class="flex-container2">
            <div style="width:100%">
                <button 
                    class="btn" 
                    style="width:35%"
            >
                <?php echo get_post_meta(
                    $post->ID, 
                    'rehub_main_product_price', 
                    true);
                ?> 
                    €
                </button>
                <a 
                    href="<?php echo get_post_meta(
                        $post->ID, 
                        'rehub_offer_product_url', 
                        true);
                    ?>" 
                    title="" 
                    target="_blank" 
                    rel="nofollow"
                >
                    <button 
                        class="bounceIn" 
                        style="width:65%"
                    >
                        <i class="far fa-grin-tears"></i> 
                        LO VOGLIO!
                    </button>
                </a>
            </div>
        </div>
    </div>
</div>

Answer 1

Вам необходимо установить следующий CSS для второго контейнера:

.flex-container2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

А затем внутри контейнера вам нужно установить flex-grow для каждого элемента.Допустим, у нас есть класс .item для каждого элемента во втором контейнере.Затем вы можете сделать что-то вроде этого:

.item {
  flex-grow: 1;
}

Это позволит элементам в контейнере увеличиваться по мере появления свободного места.Таким образом, он будет корректироваться независимо от того, показывается второе погружение или нет.

Я создал демонстрационный пример на CodePen , чтобы продемонстрировать работу.

Надеюсь, это поможет.Ура!