Shifted overflowing div Mozilla Firefox Margin - html

Question

I want to code a shifted div as here:
https://codepen.io/anon/pen/VQQdaL
Relevant css:
.wrap {
display: flex;
margin: 0 auto;
max-width: 1000px;
width: 100%;
}
.box {
position: relative;
flex-shrink: 0;
background: #fff;
margin-bottom: 5%;
width: 50%;
}
.image {
flex-shrink: 0;
margin-top: 5%;
margin-left: -5%;
width: 55%;
background: linear-gradient(135deg, #fed2db, #212353);
}
this works for me just fine in Chrome/Safari but not in Firefox. Is there something I am missing?
This is what it should look like:
This is what it looks like in Firefox:
.section {
background: black;
padding: 4em 0;
}
.wrap {
display: flex;
margin: 0 auto;
max-width: 1000px;
width: 100%;
}
.box {
position: relative;
flex-shrink: 0;
background: #fff;
margin-bottom: 5%;
width: 50%;
}
.image {
flex-shrink: 0;
top: 5%;
margin-left: -5%;
width: 55%;
background: linear-gradient(135deg, #fed2db, #212353);
}
<div class="section">
<div class="wrap">
<div class="box">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="image"></div>
</div>
</div>

Answer 1

The problem seems primarily due to the lack of absolute height. I couldn't produce a clean single reason for the behavior, but in the meantime, I recreated the intended result in JSFiddle. Hope this helps.
JSFiddle code:
.section {
background: black;
padding: 4em 0;
}
.wrap {
display: flex;
margin: 0 auto;
max-width: 1000px;
width: 100%;
}
.box {
position: absolute;
height: 100px;
flex-shrink: 0;
background: blue;
margin-bottom: 5%;
width: 50%;
}
.image {
position: relative;
height: 100px;
flex-shrink: 0;
background: green;
margin-top: 20px;
margin-left: 45%;
width: 55%;
background: linear-gradient(135deg, #fed2db, #212353);
}
<div class="section">
<div class="wrap">
<div class="box">
<br>
<br>
<br>
<br>
<br>
</div>
<div class="image"></div>
</div>
</div>