Блог

Итак, я поместил этот большой контейнер с сеткой в гибкий контейнер того же размера, что и браузер, теперь моя проблема внутри этого гибкого интерфейса, там также есть моя панель навигации, которая занимает всего 10 дюймов высоты экрана, затем есть моя сетка, которая всегда занимает больше, чем остальная часть гибкого контейнера, ион превышает высоту экрана. Несмотря на то, что я фиксирую его только на 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;
}