Html 嵌套div元素溢出flex容器

我有这个html页面：

因为

#content

有很多div和p嵌套，所以它的高度非常高，并且溢出了父div（

#content meta wrapper

）。我尝试了

溢出：隐藏

、

自动

和

滚动

。我也尝试过使用

最小高度

。我试图实现的是

#flex container

占据了100%的屏幕（100vh），并且它的所有子对象都可以在视口中看到。我希望

#内容元包装器

占据大部分屏幕，但不给它一个固定的

高度

。特别是，我希望

#content

不会溢出

#content meta wrapper

，而不给它一个固定的

高度（出于响应目的），这样用户就可以只在
#content
分区内滚动，而不必滚动整个页面。有可能做到这一点吗


#柔性容器{
显示器：flex；
高度：100vh；
弯曲方向：立柱；
}
.标题{
flex:01自动；
顺序：1；
}
@介质（最小宽度：800px）{
#内容元包装器{
柔性包装：包装；
弯曲方向：行；
}
}
#内容元包装器{
顺序：2；
显示器：flex；
flex:1自动；
}
@媒体屏幕和屏幕（最大宽度：799px）{
#内容元包装器{
弯曲方向：立柱；
}
}
.页脚{
顺序：3；
宽度：100%；
flex:01自动；
}
#内容{
宽度：73%；
flex:1自动；
顺序：1；
溢出：自动；
}
#书签{
显示器：flex；
对齐项目：居中；
弯曲方向：立柱；
溢出：滚动；
宽度：20%；
顺序：2；
}

菜单
内容
内容
长内容
内容
内容
Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，Veery long内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容，长内容
书签第一号
书签第二号
书签第三号
简单的页脚

    <div class="header"></div>

        <div id="content-meta-wrapper">
            <div id="content">
               <!-- with several nested divs -->            
            </div>
            
            <div id="bookmarks">
                <!-- with some anchor elements -->
            </div>

        </div>

        <div class="footer">    
        </div> 

        
    </div>  

#flex-container {
    display: flex;
    height: 100vh;
    flex-direction: column;
}

.header {
    flex: 0 1 auto;
    order: 1;
}

@media (min-width: 800px) {
  #content-meta-wrapper {
      flex-wrap: wrap;
      flex-direction: row;
  }
}

#content-meta-wrapper {
    order: 2;
    display: flex;
    flex: 1 1 auto;
}

@media screen and (max-width: 799px) {
  #content-meta-wrapper {
      flex-direction: column;
  }
}


.footer {
    order: 3;
    width: 100%;
    flex: 0 1 auto;
}

#content {
    width: 73%;
    flex: 1 1 auto;
    order: 1;
    overflow: auto;
}

#bookmarks {
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: scroll;
    width: 20%;
    order: 2;
}