menu header for edesign

using flex box to set height of all boxes

by Sarah Giles

HTML

<header>
  <div class="nav1"></div>
  <div class="nav2"></div>
</header>
 <div class="content-container">
  <div class="sub-nav"><h1>Some Text</h1></div>
  <div class="sub-nav"><h3>Some Other Text</h3></div>
 
  

    <div class= "main-content">
      <div class="red-box"></div>
      <div class="blue-box"></div>
      <div class="red-box"><div class="blue-box"></div> <div class="blue-box"></div> <div class="blue-box"></div></div>
      <div class="red-box blue-box"></div>
    </div>
</div>

CSS

body{
  margin: 0;
  height:100vh;
  overflow:hidden;
  display:flex;
   flex-direction: column;
}
.content-container{height:100%; overflow:hidden;}
.nav1{height:10px; background-color:grey;} 
.nav2{height:50px; background-color:purple;}
.sub-nav{border:1px solid green;}

.red-box{border:3px solid red; min-height:60px; margin:10px}
.blue-box{background-color:lightblue; height:100px; margin:10px}
.main-content{overflow:auto; height:100%;}