Topic: Flexbox in Firefox comportamento inaspettato

[alegogh]

Salve a tutti,

sto lavorando su flexbox ma riscontro dei problemi con Firefox, invece non anche con gli altri browser. Praticamente sto cercando di creare, in ambiente flexbox appunto, due blocchi che occupano l'intera area visibile, uno di fianco all' altro, quindi il primo blocco occupa la prima meta sinistra della finestra, ed il secondo la seconda meta destra. Fin qui tutto bene. Ciascun blocco contiene un elemento span contenente del testo, che vorrei centrare sia in orizzontale che in verticale. Ed e' qui che riscontro problemi. Nel senso che i 2 elementi span vengono spostati inaspettatamente (lameno per me) a sinistra, perdendo dunque il centramento orizzontale. Vi posto sotto il mio codice, la parte in css e quella in html. Saluti

CSS

.container0 {
  display: flex;
  width: 100vw;
  height: 100vh;
  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"
}
.meta:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 50vw;
  height: 100vh;
  font-size: 5vw;
  text-shadow: 6px 6px 4px #000000;
}
.meta:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 50vw;
  height: 100vh;
}
.meta:nth-child(1), .meta:nth-child(2) {
  flex-shrink: 0;
}
.meta:nth-child(2) span {
  flex-shrink: 0;
  font-size: 5vw;
  text-shadow: 6px 6px 4px #000000;
}
.meta:nth-child(1) span:first-letter {
  font-size: 26vw;
  color: #000000;
}
.meta:nth-child(2) span:first-letter {
  font-size: 26vw;
  color: #000000;
}

HTML

<div id="container0" class="container0">
  <div class="meta"> <span>Text1</span> </div>
  <div class="meta"> <span>text2</span> </div>
</div>