なぜCSSの高さが100％オーバーフローの親ですか？

Question

CSSが明らかにheight: 100%と表示されている場合、#red要素がその親よりも大きいのはなぜですか？

#black { 
 
    background-color: black; 
 
    padding: 5px; 
 
    max-height:50px; 
 
} 
 

 
#red { 
 
    background-color: red; 
 
    padding: 5px; 
 
    height:100%; 
 
} 
 

 
#grey { 
 
    background-color: grey; 
 
    height: 100px; /* The height is just used as an exemple, it cannot be known. */ 
 
    max-height: 100%; 
 
}

<div id="black"> 
 
    <div id="red"> 
 
     <div id="grey"></div> 
 
    </div> 
 
</div>

いくつかの答えは、必要性を理解していないようですので、この平均は私が（私の、悪い申し訳ありません）私の目的上明確ではありませんでした。

私が望むもの：

#red要素は、その親と同じ高さを持つように、#black要素（ありませんので、スクロールバー、無溢れ、そして隠れたスペース）。 #black要素の高さは（となるように）に変更される可能性がありますが、max-heightに限定されています。

Answer 1

#blackはheight（max-height）を持っていません。

したがって、他のすべてのheightまたはmax-heightまたは100%は、不明の100%は不明であるため、無視されます。 #grey - -

#redは高さを持っている唯一の理由は、それが子供だからである#blackにheight: 50pxから100px

変更max-height: 50pxの高さを持っており、あなたはそれが必要として正確に動作するすべてのものが表示されます：

#black { 
 
    background-color: black; 
 
    padding: 5px; 
 
    height:50px; 
 
} 
 

 
#red { 
 
    background-color: red; 
 
    padding: 5px; 
 
    height:100%; 
 
} 
 

 
#grey { 
 
    background-color: grey; 
 
    height: 100px; /* The height is just used as an exemple, it cannot be known. */ 
 
    max-height: 100%; 
 
}

<div id="black"> 
 
    <div id="red"> 
 
     <div id="grey"></div> 
 
    </div> 
 
</div>

Answer 2

オーバーフローは、高さo f #grey div、100px。
#red divの高さは、#grey divの高さから継承されています。

あなたはその孫の同じまたはより大きな高さを持っている#blackのdivをしたい場合は、これらのいずれかを実行します。
1）#blackのdivのサイズを増やす、または
2）#black divのための固定の高さを設定し、子要素内の100%が照会のポイントを持つことができるようにする。現時点では100%は何も意味しません。親要素に相対的なサイズを持つための固定高さがないからです。

Answer 3

高さ/最大高さの問題は無視されています。これは既に2つの回答で書かれています。

赤いdivには灰色の部分が含まれているため、オーバーフローが定義されていないため、200px（上端5px +下5px）より大きくなければなりません100％（90ピクセル）を超えています。この問題を解決するには

は、は、スクロールバープロパティ
オーバーフロー/オーバーフロー-Yを設定
各々は、可視、隠れ、スクロール、自動のいずれかに設定、または継承することができます。

自動 -
スクロールを必要とする場合にのみスクロールバーが追加されます -