Dynamic image resize with CSS "max-height:100%" not working in Firefox and IE with fixed header/footer

Question

I'm having a bunch of trouble with images not resizing at all in Firefox or IE. I've built a side-scrolling photo portfolio with a fixed header and footer, and have tried to make the images take up the rest of the content space between the two. I've arranged them in an inline list to make the photos scroll sideways, and all of this works perfectly in Chrome, but the images do not resize at all in Firefox or IE. I've tried a ton of different things, none of which have worked. I've tried setting the max-height, the height:calc(), and so forth.

Here is a live version.

I am using the following code:

CSS

.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 110px;
    width: 100%;
    background-color: #fff;
    z-index:9;
}
.photocontainer{
    position: relative;
    display:inline-block;
    float:left;
    top:110px;
    max-height:calc(100% - 155px);
    max-height:-webkit-calc(100% - 155px);
    max-height:-moz-calc(100% - 155px);
    max-height:-ms-calc(100% - 155px);
    max-height:-o-calc(100% - 155px);
    height:auto;
    margin:0px;
    padding:0px;
    left:0px;
    bottom:0px;
    white-space: nowrap;
}
ul.photolistul {
    display:inline-block;
    height:auto;
    max-height:calc(100% - 155px);
    list-style:none;
    /*overflow:scroll;
    overflow-x:hidden;
    overflow-y:hidden;*/
    white-space: nowrap;
    padding:0px;
    margin:0px;
}
li.photolistli { display:inline-block; margin:0px;}
img.photo {
    margin-top:0px;
    display:inline-block;
    height:auto;
    max-height:-webkit-calc(100% - 155px);
    max-height:-moz-calc(100% - 155px);
    max-height:-ms-calc(100% - 155px);
    max-height:-o-calc(100% - 155px);
    width:auto;
    max-width:100%;
    margin-left:110px;

}
.photocount {
    position:fixed;
    bottom:0px;
    left:0px;
    height:35px;
    width:100%;
    background-color:#FFFFFF;
}

HTML

<div style="max-height:100%">
<div class="header">
    <div class="header-navbar">
        TEXT GOES HERE
    </div>
</div>
<div class="photocontainer">
<ul class="photolistul">
    <li class="photolistli"><img class="photo" src="photo1.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo2.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo3.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo4.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo5.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo6.jpg" alt="" /></li>
    <li class="photolistli"><img class="photo" src="photo7.jpg" alt="" /></li>    
</ul>
</div>
<div class="photocount">
<p class="smalltype" style="margin-left:25px;">:: TEXT GOES HERE ::</p>
</div>

My goal is to have the images scale down to fit when shrinking the browser window. Again, the code works great in Chrome, but suddenly stops working in IE and Firefox. Of course, the simplest solution is to set all of the photos to the same height (a small laptop screen, aprox 500px tall?) but I want this to be responcive and to show photos in the largest format possible without breaking the screen vertically.

Answer 1

just add overflow-x:auto in

.photocontainer{
    position: relative;
    display:inline-block;
    float:left;
    top:110px;
    max-height:calc(100% - 155px);
    max-height:-webkit-calc(100% - 155px);
    max-height:-moz-calc(100% - 155px);
    max-height:-ms-calc(100% - 155px);
    max-height:-o-calc(100% - 155px);
    height:auto;
    margin:0px;
    padding:0px;
    left:0px;
    bottom:0px;
    white-space: nowrap;
    overflow-x:auto;
}

I checked your live version in inspect element and its working perfectly