Height 50% not filling half of flex parent on Safari - html

Question

I have a jsfiddle below of 3 divs, 2 of which service-box-one & service-box-two the child service-details needs to be half the size of the parent div service-box and positioned at the bottom of the parent div service-box.
This works fine in IE, Firefox and Chrome, however, with safari, the divs empty-details and service-details don't inherit the 50% height and sit at the top of the parent div service-box instead of the bottom.
If you load the jsfiddle in IE, Firefox and Chrome you can see how it's supposed to look.
jsfiddle
.service-3col {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.service-3col>li {
overflow: hidden;
}
.service-box {
width: 33.33333%;
max-width: 33.33333%;
-webkit-box-flex: 1 1 33.33333%;
-moz-box-flex: 1 1 33.33333%;
-webkit-flex: 1 1 33.33333%;
-ms-flex: 1 1 33.33333%;
flex: 1 1 33.33333%;
padding: 0 10px;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.service-box .service-img {
min-height: 250px;
position: relative;
transition: all 0.5s ease-in-out;
background-image: url('https://wallpaperbrowse.com/media/images/random-pictures-1.jpg');
}
.service-box .service-img {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 100%;
}
.service-box .service-img .empty-details {
height: 50%;
background: transparent;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
width: 100%;
flex-direction: column;
}
.service-box-one .service-img .service-details,
.service-box-two .service-img .service-details {
height: 50%;
}
.service-box .service-img .service-details {
background: rgba(0, 102, 0, 0.8);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
width: 100%;
flex-direction: column;
}
.service-box .service-img .service-details h1 {
text-align: center;
color: #FFF;
font-family: 'Times New Roman', Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin-top: 15px;
margin-bottom: 0;
font-size: 1.6em;
}
h1 {
font-size: 2em;
margin: .67em 0;
}
.service-box-one .service-img .service-details p,
.service-box-two .service-img .service-details p {
font-size: 1.2em;
}
.service-box .service-img .service-details p,
.service-box .service-img .service-details b {
text-align: center;
color: #FFF;
margin: 0 1em 1em 1em;
}
.service-box-three .service-img .service-details {
height: 100%;
}
<div class="Zebra-section">
<div class="container">
<ul class="service-3col">
<li class="service-box service-box-one">
<div class="service-img">
<div class="empty-details">
</div>
<div class="service-details">
<h1>NO VAT!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo, odio sit amet interdum porttitor</p>
</div>
</div>
</li>
<li class="service-box service-box-two">
<div class="service-img">
<div class="empty-details">
</div>
<div class="service-details">
<h1>Surveys</h1>
<p>Buying a house?
<br> You need a survey.
</p>
<a class="Btn Btn--big">READ MORE</a>
</div>
</div>
</li>
<li class="service-box service-box-three">
<div class="service-img">
<div class="service-details">
<h1>Testimonials</h1>
<div class="testimonial-fade">
<div class="testimonial-text">
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo, odio sit amet interdum porttitor, nibh elit tempus mi, ac consequat tortor sem vitae sapien. Mauris tempus leo neque, in sollicitudin lorem venenatis ac. Vestibulum imperdiet mollis dignissim. Suspendisse vitae posuere tellus.</em></p>
<b>Chris</b>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>

Answer 1

Add these two lines of code to your CSS:
.service-box .service-img .empty-details
{
position:relative; <-------- this
float:left; <-------- this
width:100%;
height: 50%;
background: transparent;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
Those two lines should force the empty-details div and service-details div to each take a position relative to their container div and since they both have width:100% they should both occupy the whole width meaning the latter will have to go to the bottom since the top is taken.
There are other approaches, for example, if the top example didn't work you could set the service-details div to be position:absolute and bottom:0 since its parent container element now has position: relative (leave the new CSS we just addded above). And add the class .service-details under the old statement (don't erase the old CSS) like this:
.service-box-one .service-img .service-details, .service-box-two .service-img .service-details
{
height: 50%;
}
.service-details
{
position:absolute; // Container div must have position:relative
bottom:0; // No need to write px in 0px when value is 0
}