Search code examples
cssintrinsic-content-sizeintrinsic-ratio

CSS: Intrinsic-ratio (padding-hack) unexpected behavior with single element

I am a little bit confused about the padding-ratio-hack.

It works with an extra container, but if I simplify the markup it does not behaves in the same way. (the height differs)

.demo-wrapper {
  max-width: 300px; 
}
.demo-child {
  width: 100%;
  padding-bottom: 33.333%;
  border: 2px solid black;
  background: silver;
}

.demo-child.noWrapper {
  width: 300px;
}
<div class="demo-wrapper">
    <div class="demo-child"></div>
</div>
<br />
<div class="demo-child noWrapper"></div>
<!-- no more wrappers yeah -->

Solution

  • As it says in the Article:

    The padding in a percentage is based on the width of the containing block.