Max-height ignored in Firefox, works in Chrome and Safari - firefox

Question

I'm making a slideshow of images with the class display. I want to limit the height and width of the image to a maximum of 80% of the window's, so that there won't be a need for a scroll bar at any normal size. Here's the CSS I used:
.display {
max-width: 80%;
max-height: 80%;
}
It works exactly how I want it to work in Chrome and Safari, and Firefox acknowledges the max-width as well. But Firefox ignores the max-height, so large vertical images go off screen.
Thanks very much for any help.

Answer 1

You need to tell the browser about html height and body height. Then it calculates the height based on those sizes. The following works fine on all bowers.
html { height: 100%; }
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.display {
max-width: 80%;
max-height: 80%;
overflow: hidden;
}
There's a working example here: http://jsfiddle.net/P7wfm/
If you don't want image to crop if they exceed the 80% height or width set img height to
.display img {
min-height: 100%;
min-width: 100%;
}

Answer 2

I agree with #Uds, you will need to specify the height and width of the body and html element
Other thing to keep in mind:
Moreover you will also need to define the browser in CSS code, you can define it by follow:
.display{
/* For general browser */
max-width: 80%;
max-height: 80%;
/* For Firefox browser */
-moz-width: 80%;
-moz-height:80%;
/* For Chrome and Safari browser */
-webkit-width: 80%;
-webkit-height:80%;
/* For Opera browser */
-o-width: 80%;
-o-height:80%;
}
This will specify that which browser should have what kind of height or width.

Answer 3

You need to set height for container element or to body:
body {
height:100%;
min-height:100%;
}

Answer 4

Tried the proposed solutions without success, on Firefox 62.0, max-height animation is ignored.
There is also a delay when the max-height property is changed matching the duration of the animation.

Answer 5

I had the same problem today but with the nice twist that I could not set all parental elements to a height of 100%.
I found a clue to another solution to this problem here:
https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
You can assign not only % to max-height, but also "em", so if you set your html and body to a font-size of 100% this works similiar to a percental width.
<div>
<p>
<img src="" alt="">
</p>
</div>
html,body{
font-size: 100%;
}
img{
max-width: 100%;
max-height: 50em;
}
DEMO

Answer 6

Changing max-heigth to 80vh worked for me.