CSS: непредсказуемое поведение Intrinsic-ratio (padding-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 -->

Источник

1 ответ

Решение

Как говорится в статье:

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

Источник
Другие вопросы по тегам