Исправлены боковая панель и заголовок с переполнением содержимого y

Question

Я пытаюсь найти следующее с сеткой дисплея:

Я определил следующее:

grid-template-area: "lo go header" "nav content";

но я получаю это:

body {
  margin: 0;
}

.page {
  display: grid;
  grid-template-rows: 55px calc(100vh - 55px);  /* height limitation on second row */
  grid-template-columns: 20vh auto;
  grid-template-areas: "logo header" 
                       "nav content";
}
.logo{
  grid-area: logo;
  background-color: red;
}
.nav {
  grid-area: nav;
  background-color: aqua;
}
.header {
  grid-area: header;
  background-color: lightgrey;
}

.content {
  grid-area: content;
  background-color: red;
  overflow: auto;                          /* overflow condition on parent */
}

article {
  height: 1000px;                          /* height set on child; triggers scroll */
}

<div class="page">
    <div class="logo">
    b
    </div>
  <div class="nav">
    </div>
  </div>
  <div class="header">Header</div>
  <div class="content">
    <article><!-- new section for content -->
      <h1>title</h1>
    </article>
  </div>
  <div>

Если кто-нибудь может мне помочь, как решить эту проблему или улучшить код, я был бы благодарен.