Cuando solo hay una fila de "elementos flexibles", Chrome y Firefox muestran resultados diferentes. ¡Cuando hay más de una línea (ajuste), Chrome y Firefox muestran el mismo resultado!

Entonces, ¿por qué está pasando esto? ¿Es un error o hay algún "valor predeterminado" o diferencia que me falta?

body{
    background-color: teal;
}

.flexContainer{
    background-color: blue;
    border: 1px solid black;
    height: 300px;
}
.flexItem{
    background-color: red;
    border: 1px solid black;
}

.flexContainer{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start;
}

.flexItem{ 
    flex: 0 1 0; 
}

<div class="flexContainer">
    <div class="flexItem">1111111111111111111</div>
    <div class="flexItem">2222<br/>2222</div>
    <div class="flexItem">3333<br/>3333<br/>3333</div>
    <div class="flexItem">4444444444444444444</div>
</div>