なぜinline-blockは計算された高さの親に展開されませんか？

Question

次のコードでは、子の(inline-block)の幅が親の計算された幅の100％に拡大されますが、.childのheightが.parent's計算された高さに拡大しない理由はわかりません。

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.ancestor { 
 
    height: 250px; 
 
    border: 1px solid green; 
 
} 
 

 
.parent { 
 
    display: block; 
 
    padding: 20px; 
 
    border: 1px solid #474747; 
 
    background-color: #fff; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: pink; 
 
}

<div class="ancestor"> 
 
    <div class="parent"> 
 
    <p class="child"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing. 
 
    </p> 
 
    </div> 
 
</div>

私はこの行動の背後にあるロジックではなく、解決策を知ることに、より興味を持っています。誰か、plsはこれが起こることを説明することができます。親要素が定義された高さの設定がある場合

おかげ

Answer 1

height: 100%;にのみ有効であることができます。その高さの設定もパーセンテージ値である場合、祖父母も定義された高さが必要です。絶対値（px、emなど）で高さが設定されていない場合は、bodyおよびhtmlまでのすべての祖先に同じことが適用されます。ビューポートを基準にしたvhです。