grid items don't fully occupy grid container - html

Question

I have created a site design and everything is okay except that I am having problem in getting the grid items to occupy all the space available to them.
I have added the site in codepen here.
.container{
border-radius: 8px;
width:90%;
height: 90vh;
margin: 0 auto;
background: #ecf0f1;
display: flex;
flex-direction: column;
}
main{
display: grid;
grid-template-columns: 300px 1fr;
flex-grow: 1;
}
.data-box{
padding-top:1rem;
background: #e74c3c;
color: #fff;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 3rem 2.5rem 2.5rem auto;
justify-items: center;
align-items: center;
}
.display-box{
padding: 2em;
background: #2c3e50;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(6em,1fr));
grid-gap:1.5rem;
align-items: center;
justify-items: center;
}
HTML:
<div class="container">
<div class="main-text">
<h1>Smart Parking System UI</h1>
<p>Currently viewing: <span class="lot-id">Beta</span></p>
</div>
<main>
<div class="data-box">
<p class="m-para">Parking Status</p>
<p class="total-para">Total Seats:</p><span class="total-data">15</span>
<p class="avail-para">Available: </p><span class="avail-data">12</span>
<div class="location">
<p>Your Location:</p><i class="fas fa-map-marker-alt"></i><p>Asgard</p>
</div>
</div>
<div class="display-box">
<div class="lot-box inactive">1</div>
<div class="lot-box">2</div>
<div class="lot-box">3</div>
<div class="lot-box">4</div>
<div class="lot-box">5</div>
<div class="lot-box">6</div>
<div class="lot-box">7</div>
<div class="lot-box">8</div>
<div class="lot-box">9</div>
<div class="lot-box inactive">10</div>
<div class="lot-box inactive">11</div>
<div class="lot-box">12</div>
<div class="lot-box">13</div>
<div class="lot-box">14</div>
<div class="lot-box">15</div>
</div>
</main>
</div>
The problem can be noticed in full page view. The container div is a flexbox and contains the main-text div with flex-grow 0 and main tag with flex-grow 1. The main tag is a grid container with two grid items display-box and data-box. I am having difficulty in making them occupy all the space available to them in main tag as seen by the white blankspace.

Answer 1

The main element actually is stretching the full height of the container. In other words, flex-grow: 1 is working. (You may know this already.) The child elements (data-box and display-box) are not stretching the full height of the parent because they simply don't have enough content in them yet.
You also have data-box set to:
grid-template-rows: 3rem 2.5rem 2.5rem auto;
That creates four rows of a defined or content-based height. Using fr units covers available space.
grid-template-rows: 3fr 2fr 1fr auto;
revised codepen