高さ：なぜ、子コンテンツのサイズがautoで、表示：祖父母のインラインサイズですか？

Question

親要素の高さがautoの場合、高さ100％の子要素は子コンテンツのサイズになります。

例：

html, body{ height:100%; padding:0; margin:0;} 
 
.grandParent{ 
 
    background-color:red; 
 
    height:100%; 
 
} 
 

 
.parent{ 
 
    background-color:blue; 
 
    height:auto; 
 
} 
 

 
.child{ 
 
    background-color:green; 
 
    height:100%; 
 
}

<div class="grandParent"> 
 
    <div class="parent"> 
 
    <div class="child"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    </div> 
 
</div>

ただし、親表示に要素に設定した場合：インライン、100％の高さを持つ子要素を、それは意志のサイズの100％に祖父母。

例：祖父母にインラインサイズ：子コンテンツとディスプレイへの自動サイズ：

html, body{ height:100%; padding:0; margin:0;} 
 

 
.grandParent{ 
 
    background-color:red; 
 
    height:100%; 
 
} 
 

 
.parent{ 
 
    background-color:blue; 
 
    display:inline; 
 
} 
 

 
.child{ 
 
    background-color:green; 
 
    height:100%; 
 
}

<div class="grandParent"> 
 
    <div class="parent"> 
 
    <div class="child"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    </div> 
 
</div>

なぜ高していますか？

Answer 1

height: autoは、コンテンツに含まれる高さをdivに与えます。だからコード行がある場合は20pxの高さになりますが、2行の場合はその倍の高さになります。

heightautoブラウザでは、高さが計算されます。