下拉菜单展开时所在section无法自适应高度的问题求助

我现在碰到个头疼的问题：当展开页面里的下拉菜单时，菜单内容直接重叠到下面的第二部分内容和页眉上了。我想要的是，包含这些下拉菜单的那个section，能跟着下拉内容的展开自动撑高，收起的时候再缩回去，而不是现在这样覆盖其他内容。

另外还有个小情况，我的CSS存在样式重叠的问题，因为HTML文件关联了两个CSS文件，我已经把这两个文件的内容都整合到Codepen里了。

我已经尝试了好几种方法，但完全没看到任何变化，试过的操作包括：

• 修改min-height属性
• 彻底移除min-height
• 使用max-height属性
• 调整margin值
• 设置元素的display为flex
• 移除z-index属性

而且控制台里没有任何报错信息，所以我猜测这个问题应该和JavaScript无关。

相关代码 #

HTML代码

<section>
    <h1>Here鈥檚 The Basics!</h1>
    <div class="dropdowns">
        <div class="dd1c">
            <button class="dropdown dropdown1">Sydney's Public Transport & How To Use Them!</button>
            <img src="images/chevron-down.svg" alt="" class="dropdownarrow">
            <div class="dd1cdrop ddcdrop"></div>
        </div>
        <div class="dd2c">
            <button class="dropdown dropdown2">Finding a Doctor or Medical Service / OSHC</button>
            <img src="images/chevron-down.svg" alt="" class="dropdownarrow">
            <div class="dd2cdrop ddcdrop"></div>
        </div>
        <div class="dd3c">
            <button class="dropdown dropdown3">Understanding Your Housing/Accomodation Rights</button>
            <img src="images/chevron-down.svg" alt="" class="dropdownarrow">
            <div class="dd3cdrop ddcdrop"></div>
        </div>
        <div class="dd4c">
            <button class="dropdown dropdown3">Working in Sydney & Finding A Job</button>
            <img src="images/chevron-down.svg" alt="" class="dropdownarrow">
            <div class="dd3cdrop ddcdrop"></div>
        </div>
    </div>
</section>

CSS代码（相关片段）

section:first-of-type {
    padding-top: 1.5vw;
    min-height: fit-content;
    z-index: revert-layer;
}

备注：内容来源于stack exchange，提问作者butterdogg