100vh - not covering the whole screen

Question

thanks everyone considers helping me!

So I did a grid layout, and inside one of the <div> I set the image to be 100vh. The <div> Wasn't set to be 100vh, but I wanted to see what happened if I will set the image to be 100vh. From what I understood, I was supposed to take all the view height.

But as I was surprised to find out, the image wasn't happened to be 100vh.

The image still stayed inside the container. I remind again - the container wasn't set to 100vh, only the image inside. About the container, there was a <nav>, and from what I thought the 100vh image will "break" out of the container and exceed it.

Why it didn't happen?

Why although I did 100vh to an <img> inside a <div>, the image wasn't been the full height of the viewport?

Edit - I tried to locate my <div> into the first row of the grid, and it worked. My image was 100vh.

When using vh, to an element inside a div, it has to be the first row? Thanks

I am refering to the #sidebar img - This image is inside the #sidebar When I did 100vh set to the image - it didn't took all the view port.

img {
    display: block;
    width: 100%;
   height: auto;
}
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
    grid-template-areas: 
    "nav nav nav nav"
    "sidebar main main main"
    "sidebar content1 content2 content3"
    "sidebar footer footer footer"
    ;
    grid-gap: 20px;
    height: 100vh;
    
}

nav {
    background: #a7ffeb;
    grid-area: nav;
    display: flex;
    justify-content: space-around;
}
nav ul {
    display: flex;
    align-items: center;
}
nav ul li {
    padding: 0px 10px;
    list-style: none;
}

main{
    background: #84ffff;
    grid-area: main;
    display: flex;
    align-items: center;
}


#sidebar {
    background: #18ffff;
    grid-area: sidebar;
    display: grid;
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    
}

#sidebar img {
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
}