Как да покажете отзивчиво изображение във. С. - с флаш кутия - html, css, firefox, flexbox

Не мога да разбера как да създадете вертикално подравнено изображение в Firefox с флексбокс.

Моят код работи в Safari

но не във Firefox:

Firefox Screenshot

Припокриването на изображението продължава да се припокрива с родителското присъствие, когато се промъква прозорецът.

Ето ми CSS:

    .wrapper {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
border: 1px solid red;
padding: 10px;
}

.flexbox {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid green;
}

.flex-child {
border: 2px solid blue;
}

.flex-child img {
max-width: 100%;
max-height:100%;
height: auto;
}

И тук html:

    <div class="wrapper">
<div class="flexbox">
<div class="flex-child">
<img src="/images/http://dummyimage.com/800X600/000/fff">
</div>
</div>
</div>

И връзката към JSFiddle.

Отговори:

Може би това не е най-доброто решение, но поне работи в Chrome, Safari и Firefox:

HTML:

<div class="wrapper">
</div>

CSS:

.wrapper {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
border: 1px solid red;
padding: 10px;
background: url("http://dummyimage.com/800X600/000/fff") no-repeat center center;
background-size: contain;
}

JSFiddle