Javascript 引导4中flex grow div内的垂直溢出

我对html网页布局有点不在行（我不承认这一点，因为我觉得我可能犯了一些新手错误），但这让我发疯，我还没有找到一个适合我的具体情况的解决方案

我正在尝试为将来的桌面应用程序制作此布局

这是我的密码

html，正文{高度：100%；}
.vh-100{
最小高度：100vh；
}
.身高-100{
身高：100%；
}
第一菜单
第二菜单
第一个子菜单
Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·萨皮安·利奥，奥纳·阿卡迪克特·维尔，猫科动物的封建主义者。在我们的身体里，有一只小虎鲸和一只小虎鲸；整型多洛-特勒斯，人马型猫，温和的法雷特拉-尼西。这是一种新的生活方式。自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。奥古斯门交流电源的整数。
更多内容
页脚

您需要设置最大高度和溢出：隐藏在主体上：

body {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

然后在内容上单击“溢出：自动”，让其根据需要滚动

<div class="d-flex flex-column h-100">
    <div class="content"> first menu </div>
    <div class="content"> second menu </div>
    <div class="content bg-danger flex-grow-1 overflow-auto">
        <div class="d-flex flex-row w-100 h-100">
            <div class="d-flex flex-column h-100 w-25">
                <div class="content bg-success"> first submenu </div>
                <div class="content overflow-auto"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien leo, ornare ac dictum vel, feugiat in felis. Proin et nibh us orci luctus et ultrices posuere cubilia Curae; Integer dolor tellus, sagittis sed felis sed, blandit pharetra nisi. Suspendisse suscipit consectetur nisi, vel interdum enim lacinia vel. Nulla placerat malesuada libero, vitae egestas metus interdum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer consectetur porta augue ac suscipit. </div>
            </div>
            <div class="content bg-light w-75"> more content </div>
        </div>
    </div>
    <div class="content bg-secondary"> Footer </div>
</div>

第一菜单
第二菜单
第一个子菜单
Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·萨皮安·利奥，奥纳·阿卡迪克特·维尔，猫科动物的封建主义者。在我们的身体里，有一只小虎鲸和一只小虎鲸；整型多洛-特勒斯，人马型猫，温和的法雷特拉-尼西。这是一种新的生活方式。自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。奥古斯门交流电源的整数。
更多内容
页脚

---

您需要设置最大高度和溢出：隐藏在主体上：

body {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

然后在内容上单击“溢出：自动”，让其根据需要滚动

<div class="d-flex flex-column h-100">
    <div class="content"> first menu </div>
    <div class="content"> second menu </div>
    <div class="content bg-danger flex-grow-1 overflow-auto">
        <div class="d-flex flex-row w-100 h-100">
            <div class="d-flex flex-column h-100 w-25">
                <div class="content bg-success"> first submenu </div>
                <div class="content overflow-auto"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien leo, ornare ac dictum vel, feugiat in felis. Proin et nibh us orci luctus et ultrices posuere cubilia Curae; Integer dolor tellus, sagittis sed felis sed, blandit pharetra nisi. Suspendisse suscipit consectetur nisi, vel interdum enim lacinia vel. Nulla placerat malesuada libero, vitae egestas metus interdum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer consectetur porta augue ac suscipit. </div>
            </div>
            <div class="content bg-light w-75"> more content </div>
        </div>
    </div>
    <div class="content bg-secondary"> Footer </div>
</div>

第一菜单
第二菜单
第一个子菜单
Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·萨皮安·利奥，奥纳·阿卡迪克特·维尔，猫科动物的封建主义者。在我们的身体里，有一只小虎鲸和一只小虎鲸；整型多洛-特勒斯，人马型猫，温和的法雷特拉-尼西。这是一种新的生活方式。自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路，自由之路。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。奥古斯门交流电源的整数。
更多内容
页脚