сценарий использования для функции css cal c ()

Question

У меня есть следующий вариант использования:

#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>
    

Я хочу вычислить верхнюю часть свойства css дочернего элемента с помощью функции CSS calc(), которая переводится как

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

скрипка следующая: https://jsfiddle.net/flamant/1sn3e8v4/11/

Answer 1

Я сделал ошибку в формуле. Формула на самом деле

top = 184px - (184px - ширина родительского элемента * (184/649))

, и это возможно с

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