When we use % in CSS size property , what does that mean? In this case, grid items are allowed 100% of grid container but it is actually overflowing

Question

Here I allocated 100% height and width to all the images. But it actually overflows the grid container in height(40px). I actually want the images to cover up exactly 40px here.

HTML :

<div class="grid-container">
        <div class="grid-item" style="order : 1 ;">
            <a href="https://www.facebook.com/" target="_blank">
            <img src="E:\HTML AND CSS\images\fb.jpg" height="100%" width="100%">
            </a>
        </div> 
</div>

CSS :

.grid-container
{
    background : red;
    margin: 10px;
    height: 50px;
    display: grid;
    grid-template-columns: auto auto auto auto auto ;
    grid-template-rows:auto ;
    justify-content: space-between;
    align-content: start;
}
.grid-item 
{
    color: black;
    border: 2px solid black;    
}

Answer 1

In CSS % moderator we use it when we want to get some measure from the parent element. As an example height is 40%, Which means 40 percent of height from the parent element. If the parent element height is 100cm, 40% height equals 40cm.

<div id="dev1" height=100cm>
 <div id="dev2" height=40%></div>
</div>

dev2 height will be 40cm.