Height 100% of aspect-ratio-trick parent - css

Question

I have a parent/wrapper container where the heigth is dependent on the width, so it uses the useful aspect-ratio trick often used for iframes and videos; that is, setting i.e. height: 0, padding-top: 53.3% for 16:9.
My problem is now that I have a child inside that wrapper which needs to have height: 100%. But it doesn't take the padding into account, resulting in a heightless child with overflow.
This code snippet illustrates my problem:
let
box = document.querySelector('.aspect-ratio')
;
document.querySelector('[name="toggle"]').onclick = function(){
let
padding_trick = 'height-0'
;
if (box.classList.contains(padding_trick)) {
box.classList.remove(padding_trick);
} else {
box.classList.add(padding_trick);
}
};
* {
box-sizing: border-box;
}
.controller {
margin-bottom: 15px;
}
.wrapper {
position: relative;
width: 400px;
}
.aspect-ratio {
background-color: beige;
}
.aspect-ratio.height-0 {
height: 0;
padding-top: 53.3%;
}
.inner {
background-color: tomato;
height: 100%;
border: 1px solid #222;
}
<div class="root">
<div class="controller">
<button name="toggle">Toggle padding-trick</button>
</div>
<div class="wrapper">
<div class="aspect-ratio height-0">
<div class="inner">
<p>Bordered content height is not 1oo%.</p>
</div>
</div>
</div>
</div>
What I would want is that the text appears inside the box, and that the red background-color fills the entire height of the box.

Answer 1

What I would want is that the text appears inside the box, and that the red background-color fills the entire height of the box.
That sound like you want the inner box absolutely positioned over the padding-trick box. If that's the case, this should be possible by just adding in the position attributes.
let
box = document.querySelector('.aspect-ratio')
;
document.querySelector('[name="toggle"]').onclick = function(){
let
padding_trick = 'height-0'
;
if (box.classList.contains(padding_trick)) {
box.classList.remove(padding_trick);
} else {
box.classList.add(padding_trick);
}
};
* {
box-sizing: border-box;
}
.controller {
margin-bottom: 15px;
}
.wrapper {
position: relative;
width: 400px;
}
.aspect-ratio {
background-color: beige;
}
.aspect-ratio.height-0 {
height: 0;
padding-top: 53.3%;
position: relative;
}
.inner {
background-color: tomato;
height: 100%;
border: 1px solid #222;
}
.height-0 .inner {
position: absolute;
top: 0;
}
<div class="root">
<div class="controller">
<button name="toggle">Toggle padding-trick</button>
</div>
<div class="wrapper">
<div class="aspect-ratio height-0">
<div class="inner">
<p>Bordered content height is not 1oo%.</p>
</div>
</div>
</div>
</div>