background image doesn't shrink as screen size in firefox - html

Question

I have a div called .outer which contained a div called .film, and the div .film has some of image divs.
The problem is .outer div doesn't shrink it as the screen size in Firefox like this picture:
As you can see, the div is shrinking well in Chrome(left side) but not in Firefox(right side).
Are there any ways to shrink the .outer div in Firefox just like Chrome does?
This is the code:
* {
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

First thing which comes to mind is, setting display, width and height property of html and body tag.
Have you tried the following?
html, body {
display: block;
width: 100%;
height: 100%;
}

Answer 2

Possible solution I can find is that changing your 500px to auto that works in firefox I have tested while now the maximum width is changed which can be controlled by max-width tag just change your outer with my code :
.outer {
margin: 0 auto;
width: auto;
max-width: 500px;
height: 500px;
display: flex;
flex-flow: row;
justify-content: center;
overflow: hidden;
}

Answer 3

I think I found the solution and add the answer for the people who are having the same problem like me.
In Firefox, you should not use the px units if you want to shrink your div as the screen size. Use the padding-bottom instead of a height of the image like this:
.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>