What am I doing wrong in regards to making my layout flexible for more content?

I want the content container to be able to stretch without limit to adapt to whatever content I put inside of it, all while pushing the footer farther down.

Right now it just hits a certain point and goes beyond the footer.

What am I doing wrong?

Heres the basic css:

html,body{
  margin: 0;
  height: 100%;
  min-height: 100%;

}



.header{ 
  border-bottom: solid 2px;
  height: 8%;
  background-color: #dfd8c8;
  display: grid;
  grid-template-columns: auto 5% 5%;
}

grid-item-header {

  display: flex;
  align-items: flex-end;  
}

.body{
  overflow: auto;

  height: 92%; 
  background-color: #a39274;
  display: grid;
  grid-template-columns: 
    auto auto auto 15%;

  grid-template-rows:90% auto;
  grid-template-areas: 
  "content content content toolbar" 
  "footer footer footer footer";


}

.toolbar{
  border-right: solid 1px;
  border-left: solid 1px;
  padding-top: 2%;
  grid-area: toolbar;
  background-color: #368cbf ;
  text-align: center;
}

.footer{ 

  border-top: solid 2px; 
  text-align: center;
  grid-area: footer;
  background-color: #252523 ;
}

A link to HTML and a view of whats happening