CSS Grid - How to get overflow to work only on the middle row (of a 3 row grid)?

I have a grid with 3 rows (header, main, footer).

body {    padding: 20px;    font-family: Helvetica;    overflow: hidden;    height: 100vh;  }    .wrapper {    display: grid;    grid-template-rows: auto 1fr auto;    grid-gap: 5px;    min-height: 100%;    overflow: hidden;  }    .header, .main, .footer {    background-color: #20262e;    color: #fff;    border-radius: 3px;    padding: 20px;    font-size: 14px;  }    .main {    min-height: 400px;    overflow: auto;  }

<div class="wrapper">    <div class="header">Header</div>    <div class="main">Main</div>    <div class="footer">Footer</div>  </div>

I want the header and footer to always be fixed to the top and bottom of their respective containers, and have the middle (main row) to have a overflow scrollbar when the content would otherwise go off screen.

I'm having trouble getting the overflow to work on the main container.

http://jsfiddle.net/fysar4e1/

https://stackoverflow.com/questions/65769165/css-grid-how-to-get-overflow-to-work-only-on-the-middle-row-of-a-3-row-grid January 18, 2021 at 01:15PM