Как правильно сверстать страницу?

.container {
  display: flex;
  height: 100vh;
}
.main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100vh;
}
body {
  margin: 0;
  padding: 0
}
.header {
  background: green;
  height: 50px
}
.sidebar {
  width: 15%;
  height: 100%;
  background: orange;
}
.content {
  background: yellow;
  display: flex;
  flex-grow: 3
}

<div class="container">
  <div class="sidebar">sidebar</div>
  <div class="main">
    <div class="header">header</div>
    <div class="content">content</div>
  </div>
</div>