Comment afficher une image réactive dans Firefox avec flexbox - html, css, firefox, flexbox

Je ne peux pas comprendre comment créer une image alignée verticalement dans Firefox avec Flexbox.

Mon code fonctionne dans Safari

mais pas dans Firefox:

Capture d'écran Firefox

Les images qui se chevauchent continuent de se chevaucher avec la div parente lors de la réduction de la fenêtre.

Voici mon 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;
}

Et voici le html:

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

Et le lien vers JSFiddle.

Réponses:

Peut-être que ce n'est pas la meilleure solution, mais au moins cela fonctionne dans Chrome, Safari et 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