фоновое изображение не уменьшается в размере экрана в Firefox

Question

У меня есть div с именем .outer, который содержит div с именем .film, а у div .film есть некоторые div-изображения.

Проблема в том, что .outer div не сжимает его, так как размер экрана в Firefox выглядит следующим образом:

Как видите, div хорошо сжимается в Chrome (слева), но не в Firefox (справа).

Есть ли способы уменьшить .outer div в Firefox, как это делает Chrome?

Это код:

* {
  margin: 0;
  padding: 0;
}
section, div {
  position: relative;
}
.outer {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  display: flex;
  flex-flow: row;
  justify-content: center;
  overflow: hidden;
}
.film {
  width: 90%;
  margin: 0 .8%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  flex-shrink: 0;
  padding-bottom: 33.3333%;
  background-image: url('https://i.imgur.com/3p6TLYE.jpg');
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}
.film:nth-child(2n-1) {
  opacity: .4;
  transform: scale();
}

    <div class="outer">
      <div class="film"></div>
      <div class="film"></div>
      <div class="film"></div>
    </div>

Answer 1

Возможное решение, которое я могу найти, состоит в том, чтобы изменить ваш 500px на auto, который работает в Firefox, который я тестировал, в то время как теперь максимальная ширина изменяется, что может управляться тегом max-width, просто измените ваш внешний вид с помощью моего кода:

.outer {
  margin: 0 auto;
  width: auto;
  max-width: 500px;
  height: 500px;
  display: flex;
  flex-flow: row;
  justify-content: center;
  overflow: hidden;
}

Answer 2

Я думаю, что нашел решение и добавил ответ для людей, которые имеют такую ​​же проблему, как я.

В Firefox вам не следует использовать px единицы, если вы хотите уменьшить ваш div в качестве размера экрана.Используйте padding-bottom вместо высоты изображения следующим образом:

.outer {
  margin: 0 auto;
  width: 80%; // basic size of the holder(outer). Use percentage unit to control it.
  display: flex;
  flex-flow: row;
  justify-content: center;
  overflow: hidden;
}
.film {
  width: 90%;
  margin: 0 .8%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  flex-shrink: 0;
  padding-bottom: 70.3333%; // Set the height of the images.
  background-image: url('https://i.imgur.com/3p6TLYE.jpg');
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}
.film:nth-child(2n-1) {
  opacity: .4;
  transform: scale();
}

<div class="outer">
    <div class="film"></div>
    <div class="film"></div>
    <div class="film"></div>
</div>

Answer 3

Первое, что приходит на ум, это установка display, width и height свойства тегов html и body.

Вы пробовали следующее?

html, body {
  display: block;
  width: 100%;
  height: 100%;
}