I'm trying to understand what appears to be unexpected behaviour to me:
I have an element with a max-height of 100% inside a container that also uses a max-height but, unexpectedly, the child overflows the parent:
Test case: http://jsfiddle.net/bq4Wu/16/
.container {
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}
This is fixed, however, if the parent is given an explicit height:
Test case: http://jsfiddle.net/bq4Wu/17/
.container {
height: 200px;
}
Does anyone know why the child would not honour the max-height of its parent in the first example? Why is an explicit height required?