Höhe von 50% nicht der Hälfte flex Eltern auf Safari Füllung

Question

Ich habe einen jsfiddle unten von 3 divs, von denen 2 service-box-one & service-box-two das Kind service-detailsservice-box halb so groß wie die Mutter div sein muss und an der Unterseite der positionierten Elternteil div service-box.

Dies funktioniert in IE, Firefox und Chrome, jedoch mit Safari, die divs empty-details und service-details Sie die 50% der Höhe nicht erben und an der Spitze der Mutter div service-box statt der Unterseite sitzen.

Wenn Sie die JSfiddle in IE, Firefox und Chrome laden, können Sie sehen, wie es aussehen soll.

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

diese beiden Zeilen von Code in Ihre CSS hinzufügen:

.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; 
} 

Diese beiden Linien die empty-details div zwingen sollte und service-details div zu nehmen jeweils eine Position relative zu ihren container div und seit sie beide haben width:100% sie sollten beide die gesamte Breite einnehmen, was bedeutet, dass letztere nach unten gehen muss, da die Spitze genommen wird.

Es gibt auch andere Ansätze, zum Beispiel, wenn das Top-Beispiel nicht funktionieren Sie die service-details div einstellen könnten position:absolute und bottom:0 seit seinem parent container Elemente jetzt position: relative muss sein (lassen Sie die neuen CSS wir oben nur added). Und fügen Sie die Klasse .service-details unter der alten Aussage (nicht die alte CSS löschen) wie folgt aus:

.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 
}