Динамическое изменение размера изображения с помощью CSS "max-height:100%" не работает в Firefox и IE с фиксированным верхним / нижним колонтитулом

Question

У меня куча проблем с изображениями, которые вообще не меняют размеры в Firefox или IE. Я создал портфолио фотографий с боковой прокруткой с фиксированным верхним и нижним колонтитулами и попытался заставить изображения занимать оставшуюся часть содержимого между ними. Я разместил их в виде встроенного списка, чтобы фотографии прокручивались вбок, и все это прекрасно работает в Chrome, но в Firefox или IE размеры изображений совсем не меняются. Я пробовал кучу разных вещей, ни одна из которых не сработала. Я попытался установить максимальную высоту, высоту:calc() и так далее.

Вот живая версия.

Я использую следующий код:

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>

Моя цель состоит в том, чтобы уменьшить изображение до размеров окна браузера. Опять же, код отлично работает в Chrome, но внезапно перестает работать в IE и Firefox. Конечно, самое простое решение - установить все фотографии на одинаковую высоту (маленький экран ноутбука, примерно 500 пикселей в высоту?), Но я хочу, чтобы это было отзывчивым и показывать фотографии в максимально возможном формате, не разбивая экран по вертикали.

Answer 1

Просто добавь overflow-x:auto в

.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;
}

Я проверил ваш live version в inspect element и работает отлично