Scrollbar without fixed height/Dynamic height with scrollbar

Question

I have this HTML structure:

    

        
Dynamic height without scrollbar
    
         


        
      

Answer 1

With display grid you can dynamically adjust height of each section.

#body{
  display:grid;
  grid-template-rows:1fr 1fr 1fr;
}

Add the above code and you will get desired results.

Sometimes when many levels of grids are involved css wont restrict your #content to 1fr. In such scenarios use:

#content{
  max-height:100%;
}