html - 親 div の高さを 1 つの (複数の) 子要素の高さに設定する方法

Question

私のウェブサイトのホームページでは、animate-on-scroll ライブラリを使用して、スクロール ダウン中にページのさまざまな部分を表示しています。親 div の最初の高さを最初の子 div ( .intro) にするだけです。下にスクロールすると、ボックスの高さがコンテンツ全体の高さに合わせて拡張されます。

スクロール後に高さを 100% に変更する Vue.js の動的クラス バインディングを使用して、部分的に動作します。しかし、最初の高さを絶対値に設定した場合にのみ正しく取得できますが、これは私が望むものではありません。

<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他の子 div (.aboutおよび) を使用.workすると、高さの問題は解決しますが、さまざまなメソッドとアニメーションをトリガーするためにすべての非表示のコンテンツをページに残す必要があるため、これを使用できません。

親の高さを最初の子divの高さに一致させることができる、より応答性の高いソリューションが本当に欲しいです。CSSだけでこれを行う方法はありますか？それとも、Vue.js や Javascript を使用するのでしょうか?