Set parent's (undefined width and height) dimension equal to child's - html

Question

I have a parent div with undefined width or height.
The first child 'a' has set width and height. How can I make the parent have the size dimensions as the child.
.parent{
position: fixed;
background: green;
padding: 10px;
}
.child-a{
position:absolute;
width: 300px;
height:50px;
background: red;
}
.child-b{
width:100%;
height:120%;
background: blue;
}
<div class='parent'>
<div class='child-a'></div>
<div class='child-b'></div>
</div>
2nd part: I want the div 'c' to be 120% of the parent's height, and be positioned behind div 'a'. So only the bottom of 'c' is visible.
I've tried multiple solutions include display: table, overflow: overlay etc but nothing gives me the desired result. I'm looking for a CSS only solution.

Answer 1

function childSize () {
var parentHeight = document.getElementById( HAVE PARENTS ID HERE ).offsetHeight;
parentHeight = parentHeight / 100 * 120;
document.getElementById( HAVE CHILD C ID HERE ).offsetHeight = parentHeight;
}
This answer is only for the second part hope it helps :)

Answer 2

For height percentage to work, its parent has to have a height property too. See https://stackoverflow.com/a/16642908/5599288 . Therefore, the parent's height cannot be undefined or automatically sized.
You gotta set a fixed height on the parent, then control the child using percentage. This is how i would do it, in a pure CSS way,
https://codepen.io/jacobgoh101/pen/jZrvWw
.parent {
position: fixed;
background: green;
padding: 10px;
width: 300px;
height: 50px;
}
.child-a {
position: absolute;
background: red;
// set size, padding 10px and centering
width: calc(100% - 20px);
height: calc(100% - 20px);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.child-b {
width: 100%;
height: 120%;
background: blue;
}