CSS : Overlaying divs on top of each other using flexbox syntax(vw, vh)?

I've been working to make an effect when user over their mouse over a div, it shows color overlay. It is simple effect. However the problem is I used flex, vw and vh, because I wanted to make responsive site. So when I made divs' size perfectly match each other, once browser size become different than it does not match anymore. I tried to find any examples on the internet but those are usually fixed size with px or position. I would like to know if there is a way to overlay color div on another div. If there is no solution, I guess I have to rebuild site into non-responsive.

Here is HTML

<div class="thumbnail">
  <div class="thumbnail_img">
    <img class="thumbnail_img" src="./resources/img/size_minmuri1.jpg" alt="...">
    </div>
    <div class="caption">
      <p class="caption_heading">Item name<br/>
          <span class="caption_desc">Item description</span></p>
    </div>
    <div class="thumbnail_footer">
    <a href="#" class="btn btn-primary" role="button">Read</a> <a href="#" class="btn btn-default" role="button">Button</a>      
    </div>
    <!-- overlay item  -->
    <div class="description" href="#">
        <div class="description_heading"><br>_____<br>Item name <br>_____</div>
        <div class="description_desc">item description</div>        
    </div>
    <!-- overlay item  -->
</div>

So When user hover their mouse over thumbnail div, description div should be appear and cover whole thumbnail div.

Here is CSS

.thumbnail{
   padding: 0px 0px 0px 0px;
   border:1px solid gray;
   background-color: white;
   border-radius: 5px;
   margin: 5px 10px 5px 10px;
   min-width: 10vw;
   min-height: 40vh;
   display: flex;
   flex-direction: column;
   cursor: pointer;
   z-index: 1000;
 }

.thumbnail_img{
   width: 100%;
   height: auto;
   z-index: 1000;
}

p.caption_heading{
   font-weight: bold;
   line-height: 1em;
   font-size: 20px;
}
span.caption_desc{
   font-size:15px;
   color: gray;
 }

.caption{
   flex-grow: 1;
   z-index: 1000;
   background-color: white; 
}

.thumbnail_footer{
   padding: 0px 10px 10px 10px;
   background-color: white;
   z-index: 1000;
 }


 .description{
   background:rgba(252, 111, 27, 0.75);
   text-align:center;
   padding:45px 0 66px 0;
   opacity:0;
   -webkit-transition: opacity .25s ease;
   -moz-transition: opacity .25s ease;
  }


 div.description_heading {
   font-size: 20px;
   font-weight: bold;
   line-height: 2em;
 }

div.description_desc {
   font-size: 15px;
   line-height: 2em;
 }

.thumbnail:hover .description {
   opacity: 1; 
  }