Check out the code snippet below (you can also view a demo on JsFiddle):
#outer {
display: table;
height: 200px;
width: 100%;
background: gray;
}
#inner {
width: 100%;
background: blue;
max-height: 100%;
}<div id="outer">
<img id="inner" src="http://jsfiddle.net/img/logo.png">
</div>The parent element is using display:table (set by a third-party framework), and I have set max-height:100% in the child element for constraint purposes.
However, in the demo above (tested in Chrome 46.0), the height of the child element seems to become "ZERO."
After removing the display:table attributes from the parent element, everything works correctly again.
According to the MDN document on max-height, when specifying a percentage value for max-height:
The percentage is calculated relative to the height of the generated box's containing block. If the height of the containing block is not explicitly defined (i.e., it depends on content height) and this element is not absolutely positioned, the percentage value is treated as none.
In my understanding based on the demo, the #inner element's containing block is explicitly set to #outer, so the max-height:100% attribute in #inner should be equivalent to height: 200px. Is this correct? Any thoughts on where I might have made a mistake?
Thank you!