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

正如在文章說

在一個百分比的填充是基於包含塊的寬度。