CSS：单个元素的内在比率（填充 - 黑客）意外行为

Question

我对padding-ratio-hack有点困惑。

它适用于一个额外的容器，但是如果我简化了标记，它的行为方式就不一样了。 （高度不同）

.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 -->

Answer 1

如文章所述：

  

百分比中的填充基于包含块的宽度。