Html 使用第一页css保持网格

所以我把这个大网格容器放在一个和浏览器大小相同的flex容器中，现在我的问题是在这个flex中，还有我的导航栏，它只占屏幕的10个视图高度，还有我的网格，它总是比flex容器的其余部分占得多，并且超过了屏幕高度。即使我将其修改为仅90视图高度，其内容仍将超过该高度。我能做些什么使它保持在90视图高度

HTML和CSS：

    <div class="mainpage">
    <section class="nav">
       <div class="logo "
       </div>
       <ul class="navbar">
       </ul>
    </section>
    <section class="container">

        <div class="description pageone">
        </div>
    </section>
</div>
.mainpage{
    width: 100%;
    height: 100vh;
    background-image: url("./images/background.jpg");
    background-size:cover;
    background-position: top center;
 
}
.nav{
    position: sticky;
    top:0;
    background-color: rgba(255,255,255,.5);
    overflow: hidden;
    display:flex;  
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;


}
.nav *{
    line-height: 10vh;
    height: 10vh;
}
.container{
    width: 100%;
    height: 90%;
    display: flex;

}
.pageone{
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows:2% 1fr 1fr 1fr 2%;
    grid-template-areas:
    ". . . . . . ."
    ". hero hero . . . ."
    ". hero hero . . . ."
    ". hero hero . text text ."
    ". . . . . . ."
    ;

}

所以我自己发现了问题。由于flex设置为wrap，导航栏中的所有内容都超过了10视图高度，占据了视图高度的10%以上，这就是为什么当我将浏览器重新压缩到较小尺寸时，网格中的所有内容都会超过屏幕高度

/*From this*/
.nav{
flex-wrap: wrap;
}
/*To this*/
.nav{
flex-wrap: nowrap;
}