parent max-height在Firefox中不起作用

Question

我的HTML代码的div为parent类，最大高度为60%。在此div内部有max-height: 100%的图像。 其概念是：图像在父div内应为100％高度 的的index.html

<div class="parent">
<img src="https://gp1.wac.edgecastcdn.net/806614/photos/photos.500px.net/86054889/a33fe4cc9c14a08fdf785e82c400b254caa4aed4/5.jpg?v=5" alt="" />

的的style.css

body {
    background: green;
}
html, body {
    height: 100% !important;
    width: 100% !important;
    margin: 0px;
}
.parent {
    max-height: 60% !important;
    max-width: 100%;
    background: #444;
    text-align: center;
}
.parent img {
    max-height: 100%;
}

图像在chrome中完美地监听其父div高度，但在firefox中，图像不会监听父div高度而是达到自己的高度。
我怎样才能使它在Firefox上运行？
CodePen链接：这是CodePen上的代码，这是我到目前为止所尝试的内容。