Height 100% of aspect-ratio-trick parent

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.

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). — Paulie_D, Jun 01 '18 at 14:02
The only way to achieve this is to take the child element out of flow. You can't make its height relative to the parent if its height is going to affect the parent's height. If it did, that would change its height, which would change the parent's height, which would change it's height, etc. It's a logical loop. If you add `position:relative` to the parent, `position:absolute` to the child, your height will be correct; but the child will be out of flow. Can the child be out of flow in your case? — Joseph Marikle, Jun 01 '18 at 14:18
Since when is it mandatory to use the code snippet tool rather rhan a fiddle? … \*sigh\* Oh well. — WoodrowShigeru, Jun 01 '18 at 16:40
I will try the `absolute` thing now. Though, I can't quite follow you: why does the child affect the parent's height? Do you mean because it could get larger than the box due to long texts? The way I see it, the parent (= middle container) needs to maintain aspect ratio, which means it's indirectly set by the grandparent's width. Setting the child height to 1oo% is then separate from that. — WoodrowShigeru, Jun 01 '18 at 16:49

score 0 · Accepted Answer · answered Jun 01 '18 at 14:23

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>

Height 100% of aspect-ratio-trick parent

1 Answers1