Как установить высоту родительского div на высоту только одного (из нескольких) дочерних элементов

Question

На домашней странице моего сайта я использую библиотеку анимации при прокрутке, чтобы показать различные части страницы при прокрутке вниз. Я хочу, чтобы родительский div изначально имел высоту первого дочернего div (.intro). При прокрутке вниз высота поля увеличивается, чтобы соответствовать всей высоте содержимого.

Он частично работает прямо сейчас, используя динамическое связывание классов в Vue.js, которое после прокрутки изменяет высоту до 100%. Но я могу получить правильную начальную высоту только тогда, когда я установлю ее на абсолютное значение, а это не то, что я хочу.

<div class="home-box" :class="{ fullView: isScrolled}">
    <div class="intro">
        Only this content is displayed at first
    </div>
    <div class="about"
                data-aos="fade-up" 
                data-aos-anchor-placement="top-center"
                data-aos-once="true">
        Then this gets revealed
    </div>
    <div class="work"
                data-aos="flip-up">
        Finally this div is revealed
    </div>
</div>

.home-box {
    width: 60%;
    margin: 3rem auto;
    height: 30rem;
}

.fullView {
    height: 100%;
}

Я пытался установить начальную высоту на разные проценты (все от 1 до 99%), но это ничего не делает. С помощью height: 70vh это самое близкое решение, которое у меня есть, но оно по-прежнему вызывает проблемы на экранах разных размеров.

С помощью display: none на другом дочернем диве (.about а также .work) исправит мою проблему с ростом, но мне нужно, чтобы весь скрытый контент оставался на странице, чтобы вызывать различные методы и анимацию, поэтому я не могу использовать это.

Мне бы очень понравилось более гибкое решение, которое могло бы сопоставить рост родителей с ростом только первого дочернего элемента div. Есть ли способ сделать это, используя только CSS? Или иначе с Vue.js или Javascript?