Overflow behaving strangely inside css grid - html

Question

When I try to do an overflow inside of a portion of a css grid I can't get it to behave normally. I have a code pen here https://codepen.io/chrisgrim/pen/WNpMeev
I am trying to get the body div to be the normal width of the screen and only have the table div inside of it use a scroll bar. Instead the entire body div, including the second-nav div inside is going off the side of the screen.
.grid {
display: grid;
grid-template-columns: 4rem auto;
width:100vw;
}
.body {
background:red;
width:100%;
height:100vh;
}
.second-nav {
width:100%;
background:blue;
height:4rem;
text-align:right;
color:white;
}
.table {
width:100%;
background:green;
height:100%;
overflow:auto;
}
.wide-item {
width:120rem;
height:4rem;
background:purple;
}

Answer 1

You have to give a fix height for the table class for scroll to work
.body {
background:red;
}
.grid {
display: grid;
}
.second-nav {
width:100%;
background:blue;
height:4rem;
text-align:right;
color:white;
}
.table {
background:green;
overflow:auto;
height:100px
}
.wide-item {
background:purple;
}
<div class="grid">
<div class="nav">
<div class="nav-item">
nav
</div>
</div>
<div class="main">
<div class="body">
<div class="second-nav">
<div class="second-nav-item">second nav</div>
</div>
<div class="table">
<div class="wide-item">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.
</div>
</div>
</div>
</div>