Flexbox-Problem bei Safari - mobile und Desktop

Question

Die horizontale Regel auf der rechten Seite überlappt den Text in Safari auf Desktop und Mobile.
Wie kann ich die Überlappung verhindern?

http://codepen.io/simply-simpy/pen/EyENLr

h2 { 
 
    align-items: center; 
 
    display: flex; 
 
    font-size: 3.125vw; 
 
    margin-top: 0; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
h2:after { 
 
    border-top: 1px solid #000; 
 
    content: ""; 
 
    display: block; 
 
    margin-left: 1.875vw; 
 
    width: 100%; 
 
} 
 

 
h2:before { 
 
    border-top: 1px solid #000; 
 
    content: ""; 
 
    display: block; 
 
    margin-right: 1.875vw; 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    align-items: center; 
 
    align-content: center; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="container"> 
 
    <h2>precision</h2> 
 
</div>

Answer 1

Mit flex-grow: 1; statt width: 100%; auf Ihrem h2:before und h2:after wird das Problem lösen.

h2 { 
 
    align-items: center; 
 
    display: flex; 
 
    font-size: 3.125vw; 
 
    margin-top: 0; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
h2:after { 
 
    border-top: 1px solid #000; 
 
    content: ""; 
 
    display: block; 
 
    margin-left: 1.875vw; 
 
    flex-grow: 1;   /* <--- Replace */ 
 
} 
 

 
h2:before { 
 
    border-top: 1px solid #000; 
 
    content: ""; 
 
    display: block; 
 
    margin-right: 1.875vw; 
 
    flex-grow: 1;   /* <--- Replace */ 
 
} 
 

 
.container { 
 
    align-items: center; 
 
    align-content: center; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="container"> 
 
    <h2>precision</h2> 
 
</div>