需要特定CSS div布局的帮助

.body {
  display:flex;
  flex-direction:column;
  width:100vw;
  height:100vh;
}

.body > .topNav {
  flex:0 0 50px;
  background: blue;
}

.body > .page {
  display:flex;
  flex-direction:row;
  flex: 1 1 auto;
}
.body > .page > .leftNav{
  flex: 0 0 300px;
  background: red;
}
.body > .page > .content{
  flex: 1 1 auto;
}

<div class="body">
  <div class="topNav">
  </div>
  <div class="page">
    <div class="leftNav">
    </div>
    <div class="content">
    </div>
  </div>
</div>