use case for css function calc()

Question

I have the following use case:

#grandparent {
    width: 100%;
}
    
#parent {
    width: calc(100% - 20px);
    height: 268px;
    background-color: white;
    top: 200px;
    position: absolute;
}
    
#child {
    width: 100%;
    height: 100px;
    background-color: green;
    position: absolute;
}

<div id="grandparent"> 
    <div id="parent"> 
        <div id="child"></div>
    </div>
</div>
    

I want to calculate the css property top of the child with the CSS function calc() that is translated as

top = 184px - width of the parent * (184 / 649)

the fiddle is the following: https://jsfiddle.net/flamant/1sn3e8v4/11/

Answer 1

I did a mistake in the formula. The formula is actually

top= 184px - (184px - width of the parent * (184 / 649))

and it is possible with

#child {
  width: 100%;
  height: 100px;
  background-color: green;
  position: absolute;
  top: calc(184px - (184px - (100vw - 20px) * (184 / 649)));
}