Aspect ratio on Mozilla Firefox - html

Question

In one of my website pages, I would like to add a picture with a dynamic size.
To do this, I follow the excellent tutorial of W3school : link
This method works perfectly on Safari and Chrome; but gives me an error on firefox..
Doing the analysis of the containers sizes, I thought the calculation seems to be different..
First, here is the Chrome and Safari method:
Red block has a width of 50% (respect to the blue one)
Red block has a height of 40% (because we also use the width of the blue one as basis for % calculation)
Then, in firefox it gives me this result :
Red block has a width of 50% (respect to the blue one)
Red block has a height of 40% of the height of the blue one, and not 40% of his parent width !
body {
background-color: blue;
}
.home_box {
margin: auto;
margin-bottom: 40px;
width: 90%;
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
flex-direction: row;
}
#home_picture {
width: 32%;
height: 0px;
padding-top: 18.1%;
background-color: red;
/*background: url('../Img/picture.jpg') no-repeat;
background-size: contain;*/
}
.home_box p {
width: 68%;
}
<div class="home_box">
<div id="home_picture"></div>
<p>Lorem ipsum</p>
</div>
Could you help fixed this issue please ?

Answer 1

Perhaps it's a problem with your Firefox version. When I run this code (slightly tweaked from yours and shown below) on Firefox 72 I get an output shown in the image below, same as what I get in old Microsoft Edge, Chromium-based Edge and Safari. Is the output correct?
body{
background-color: blue;
}
.home_box
{
margin: auto;
margin-bottom: 40px;
width: 90%;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
flex-direction: row;
}
#home_picture
{
width: 32%;
height: 0px;
padding-top: 18.1%;
background-color: red;
background-size: contain;
}
.home_box p
{
width: 68%;
}
<div class="home_box">
<div id="home_picture"></div>
</div>