scale a div properly on all devices - css

Question

How is it possible to scale a div element correctly to fit into a specific area? I have a div element with that I want to scale on hover to fit into the circle in the middle (see code snippet). Now I can set the scaling values but this will not work correctly on smaller or bigger screens. The div with the coral color should have 100vw.
The following is my HTML, css an jquery:
$(".contact-button").hover(function(){
$(".holdeer").addClass('contact');
}, function(){
$(".holdeer").removeClass('contact');
});
.getintouch {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
height: 20vh;
width: 100vw;
}
.contact-us {
position: relative;
z-index: 0;
display: flex;
height: 700px;
width: 100vw;
flex-direction: column;
justify-content: space-around;
align-items: stretch;
background-color: transparent;
}
.contact-button {
position: absolute;
z-index: 100;
display: flex;
width: 200px;
height: 200px;
margin-top: 0px;
flex-direction: row;
justify-content: center;
align-items: center;
align-self: center;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
border-top-style: solid;
border-top-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
background-color: transparent;
color: blue;
font-size: 32px;
font-weight: 700;
}
.holdeer {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
display: block;
width: auto;
height: auto;
justify-content: center;
align-items: center;
align-self: auto;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
background-color: coral;
}
.contact {
animation: shrink 1s ease forwards;
transition: all 1s;
}
#keyframes shrink {
from {
border-radius: 100%;
}
to{
border-radius: 100%;
transform: scale(0.15, 0.28);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="getintouch">
<div class="contact-us">
<div class = "contact-button"></div>
<div class="holdeer"></div>
</div>
</section>

Answer 1

You can do that with much easier & cleaner code, also with just css.
.contact-us {
overflow: hidden; /* to hide anything that goes outside */
display: flex;
height: 700px;
width: 100vw;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: transparent;
}
.contact-button {
position: relative; /* to make 'absolute' children relative to it */
display: flex;
width: 200px;
height: 200px;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: 50%;
transition: all 1s;
}
.holdeer {
position: absolute;
z-index: -1;
display: block;
width: 100%; /* takes full width of parent */
height: 100%; /* takes full height of parent */
border-radius: 50%;
transform: scale(15); /* scale to very large value to cover .contact-us and overflow: hidden with cut off what goes outside */
transition: all 1s;
background-color: coral;
pointer-events: none; /* to disable hover on this child */
}
.contact-button:hover .holdeer {
transform: scale(1); /* normal scale to fit the parent circle */
}
<div class="contact-us">
<div class="contact-button"><div class="holdeer"></div></div>
</div>