CSS：单个元素的内在比率（padding-hack）意外行为

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

正如文章中所说：

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

CSS：单个元素的内在比率（padding-hack）意外行为

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

css

intrinsic-ratio

intrinsic-content-size