firefox css max-width и max-height внутри max-height div

Question

У меня есть div с максимальной высотой и изображение внутри него, которое должно использовать max-width: 100% и max-height: 100%. В хроме это работает, но firefox использует только max-width и игнорирует max-heigth.

div#overlaycontent{ 
    position:relative; 
    overflow:hidden; 
    height:100%; 
    overflow-y:auto; 
} 

div#pic{ 
    overflow:hidden; 
    position:relative; 
    box-sizing:border-box; 
    float:right; 
    width: -moz-calc(100% - 250px); 
    width: -webkit-calc(100% - 250px); 
    width: -o-calc(100% - 250px); 
    width: calc(100% - 250px); 
    max-height:90%; 
} 

img#zoompic{ 
    max-width:100%; 
    max-height:100%; 
    display:block; 
} 

Как я могу достичь того, что firefox будет использовать оба? max-width и max-height?

Answer 1

mozilla developer network описывает max-height с процентом следующим образом:

Процент рассчитывается по отношению к высоте содержащего блока генерируемого бокса. Если высота содержащего блока явно не указана (т. Е. Зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, процентное значение считается равным нулю.

Это описание также используется с height и процентами. Поэтому, если вы хотите использовать свойство max-height, вам нужно установить изображение или родительский контейнер в определенный размер пикселя. Возможно, если вы создадите JSFiddle с вашей проблемой, мы сможем показать вам другие решения без max-height.

---

EDIT // Теперь с данной JSFiddle, это рабочий пример http://jsfiddle.net/wd9rP/