Dashboard grid alternative - html

Question

I am wondering, if there are any alternative/better ways to create this dashboard layout with flex or maybe grid? So I wouldn't need to add this pusher with 200px margin.
I heard about that it can be done using flex 1 1 0% or something like that, I am not sure how to implement it.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 200px;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
background: blue;
flex: 1;
height: 100vh;
}
.pusher {
margin-right: 200px;
}
.nav{
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="pusher">
</div>
<div class="body">
<div class="nav">
Nav
</div>
test
</div>
</div>

Answer 1

Here you go...
I removed the div with class="pusher" and changed/added the CSS as follows:
.sidebar {
width: 20vw;
}
.body {
position: absolute;
width: 80vw;
right: 0;
}
Basically, I made the div class="sidebar" and the div with class="body" make up to 100 % of the screen but in different relative units, i.e. vw (20 vw + 80 vw = 100 vw). So, now I just needed to add right: 0; to the div with class="body" in order to achieve the exact same result as you did with margin-right: 200px;. I also added position: absolute; to the div with class="body", otherwise it won't work.
See the snippet below.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 20vw;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
position: absolute;
background: blue;
height: 100vh;
width: 80vw;
right: 0;
}
.nav {
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="body">
<div class="nav">Nav</div>
<div>test</div>
</div>
</div>

Answer 2

Hi I change your HTML and CSS code and I do my best for you.
HTML CODE:
<div class="main">
<div class="sidebar">This is Sidebar</div>
<div class="content">
<div class="nav">
Nav
</div>
<div class="content-body">
test
</div>
</div>
</div>
CSS Code:
body {
margin: 0;
}
.main{
display: flex;
width: 100vw;
}
.sidebar {
left: 0;
width: 200px;
background: red;
height: 100vh;
}
.content {
display: flex;
flex-direction: column;
width: 100vw;
background: #ddd;
height: 100vh;
}
.nav{
background: yellow;
height: 60px;
}
.content-body {
background: blue;
height: 100vh;
}