Flexbox в Firefox имеет непредвиденное поведение - PullRequest
Новая
       4

Flexbox в Firefox имеет непредвиденное поведение

0 голосов
/ 09 апреля 2020

Я пытаюсь центрировать 2 элемента span внутри 2 .meta блоков. Он работает со всеми браузерами, за исключением Mozilla Firefox, после обновления sh страницы (или изменения страницы и возврата). На самом деле странная вещь заключается в том, что в первый раз в Firefox результат верный, но если я перефразирую sh или изменим страницу для возврата, элементы диапазона страниц будут перемещены влево). Мой код

Стиль 

.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>
...