如何将父div的高度设置为仅一个（多个）子元素的高度

Question

在我网站的主页上，我使用了animate-on-scroll库来显示页面的不同部分，同时向下滚动。我希望父div最初仅具有第一个子div（import tkinter as tk root = tk.Tk() default_text = 'select an item' def thing_selected(selected): #other stuff happens here print(var.get()) var.set(default_text) print(var.get()) var = tk.StringVar() var.set(default_text) options = ['Pizza','Lasagne','Fries','Fish'] menu = tk.OptionMenu(root, var, *options, command = thing_selected) menu.pack() root.mainloop() ）的高度。向下滚动时，框的高度会扩展以适合内容的整个高度。

它现在在Vue.js中使用动态类绑定部分起作用，滚动后将高度更改为100％。但是，只有将其设置为绝对值时，我才能正确获得初始高度，这不是我想要的。

.intro

<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>

我尝试将初始高度设置为不同的百分比（从1到99％的所有值），但这没有任何作用。使用.home-box { width: 60%; margin: 3rem auto; height: 30rem; } .fullView { height: 100%; } 是我最接近解决方案的方法，但这仍然会在不同的屏幕尺寸上引起问题。

在其他子div（height: 70vh和display: none）上使用.about可以解决我的身高问题，但是我需要所有隐藏的内容留在页面上以触发不同的方法和动画，所以我不能使用它。

我真的很想一个响应速度更快的解决方案，该解决方案可以将父级的高度与第一个子div的高度匹配。有什么方法可以仅使用CSS来做到这一点？还是使用Vue.js或Javascript？