Setting width relatively to the size of the grandparent div - css

Question

I have the structure that currently looks approximately like the snippet below; how can I make div2 to take the width 50% of its grandparent div, rather than 50% of its immediate parent?
<div id="grandParent" style="width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; background-color: yellow; border-color: yellow">
<div id="div1" style="width: 100px; background-color: aqua">
div1
</div>
<div id="parent" style="width: 100%; background-color: green">
parent<br>
<div id="div2" style="width: 50%; background-color: fuchsia; margin: 0 auto;">
div2
</div>
</div>
</div>

Answer 1

We can do some maths. The width of the parent is P - 100px and you need to have P/2 so if you do X/2 + 50px where X = P - 100px you will have P/2. Also better use flex-grow:1 instead of width:100% to avoid the shrink effect and have the first div always at 100px
console.log($('#div2').width())
console.log($('#grandParent').width())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grandParent" style=" display: flex; flex-direction: row; flex-wrap: nowrap; background-color: yellow; border-color: yellow">
<div id="div1" style="width: 100px; background-color: aqua">
div1
</div>
<div id="parent" style="flex-grow:1; background-color: green">
parent<br>
<div id="div2" style="width: calc(50% + 50px); background-color: fuchsia; margin: 0 auto;">
div2
</div>
</div>
</div>
You can consider the use of CSS variable to make this easier:
console.log($('#div2').width())
console.log($('#grandParent').width())
:root {
--w:100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grandParent" style="display: flex; flex-direction: row; flex-wrap: nowrap; background-color: yellow; border-color: yellow">
<div id="div1" style="width: var(--w); background-color: aqua">
div1
</div>
<div id="parent" style="flex-grow:1;background-color: green">
parent<br>
<div id="div2" style="width: calc(50% + var(--w)/2); background-color: fuchsia; margin: 0 auto;">
div2
</div>
</div>
</div>