Возможно ли это: только CSS, min-height: 100vh + background-image, которая заполняет height + content, который увеличивает высоту сечения при переполнении?

Question

Я создаю сайт, где мне нужно иметь 3 раздела с min-height: 100vh.в каждом разделе есть 2 столбца с одной стороны - div с фоновым изображением, которое заполняет высоту, а с другой стороны - текст, который на маленьких экранах должен иметь возможность увеличить высоту контейнера, чтобы он не переполнялся.

Я попробовал решения в этом посте: Ребенок внутри родителя с min-height: 100% не наследует высоту

В настоящее время я использую position: relative для родителя иposition: absolute на фоновом изображении.Это работает, но когда окно изменено в размере, текст не отталкивает родительский элемент, а просто переходит в следующее поле.

Я понимаю, почему это поведение, но есть ли способ использовать только CSS, чтобы контейнер100vh и когда экран становится меньше, контейнер увеличивается, чтобы соответствовать ему, в то время как фон заполняет высоту.

    <section class="relative">
        <div class="fill-tool">
            <!-- Content -->
            <div class="center w-100">
                <div class="cf h-100 w-100">

                    <!-- lhs -->
                    <div class="fl w-100 w-40-l h-50 h-100-l">
                        <div class="h-100">
                            <div class="bg-center cover h-100 sectionBaseImage" style="background-image: url(assets/image.png)"></div>
                        </div>
                    </div>


                    <!-- rhs -->
                    <div class="fl w-100 w-60-l mt4 mt0-l pl5-l">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a semper ligula. Proin viverra mauris enim, non condimentum orci ultricies sed.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>


.fill-tool {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

section {
    min-height: 100vh;
}