Div с позицией: Absolute получает неправильную ширину дочернего изображения, только в Firefox ⇐ CSS

[Anonymous]

Код: Выделить всё

.div1 {
position: relative;
padding-bottom: 25%;
background: lightcoral;
}

.img-container {
position: absolute;
height: 100%;
background: green;
}

.img1 {
height: 100%;
opacity: 50%;
}

Код: Выделить всё

[img]https://placehold.co/600x300[/img]

Результат Chrome (ожидаемый результат):< /p>


< Strong>Результат Firefox (неправильный результат):


Как видите, в Firefox ширина зеленого div — это просто случайное значение, а не ширина его потомков (я не вижу в этом никакой логики).
Изображения должны иметь переменную ширину, поэтому это решение мне не подойдет (невозможно установить фиксированную ширину в .img-контейнере). >
Что я делаю не так?

Подробнее здесь: https://stackoverflow.com/questions/790 ... -in-firefo