html - Why CSS height 100% overflow parent? -
why #red element bigger parent when css says height: 100%?
#black { background-color: black; padding: 5px; max-height:50px; } #red { background-color: red; padding: 5px; height:100%; } #grey { background-color: grey; height: 100px; /* height used exemple, cannot known. */ max-height: 100%; } <div id="black"> <div id="red"> <div id="grey"></div> </div> </div> because answers doesn't seem understand need, mean not clear on purpose (my bad, sorry).
what like:
the #red element have same height parent, #black element (so no scroll-bar, no overflow, , no hidden space). #black element's height may change (so cannot have exact height) bounded max-height.
#black not have height (it has max-height).
therefore, other height or max-height or 100% ignored, because 100% on unknown unknown.
the reason #red has height because it's child - #grey - has height of 100px
change max-height: 50px height: 50px on #black , you'll see work should:
#black { background-color: black; padding: 5px; height:50px; } #red { background-color: red; padding: 5px; height:100%; } #grey { background-color: grey; height: 100px; /* height used exemple, cannot known. */ max-height: 100%; } <div id="black"> <div id="red"> <div id="grey"></div> </div> </div>
Comments
Post a Comment