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

Как сказано в статье:

Заполнитель в процентах на основе ширины содержащего блока.