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

Question

我对填充比率黑客有点困惑。

它与一个额外的容器一起工作，但如果我简化标记，它的行为方式就不一样了。（高度不同）

.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

正如文章中所说：

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