Knopf Höhe mit Display flex ist nicht einheitlich in Safari

Question

Ich habe ein button unter den div mit folgenden Struktur verkapselt:

HTML:

<div class="parent-container"> 
     <div class="child child-1 col-xs-6"> 
     <button class="btn btn-primary">Customize Feed</button> 
     </div> 
     <div class="child child-2 col-xs-6"> 
     <button class="btn btn-default">Really Really Really Really Really Really Long CTA text</button> 
     </div> 
    </div> 

CSS:

.parent-container { 
     display: flex; 
     flex-wrap: wrap; 
     justify-content: flex-start; 
    } 

    .child-1 { 
     order: 2; 
    } 

    .child-2 { 
     order: 1; 
    } 

    .child button { 
     height: 100%; 
     white-space: normal; 
    } 

    .child button { 
     width: 100%; 
    } 

Die zwei Tasten (beide mit langem Text und kürzerem Text), sollten unabhängig von der Länge ihres Inhalts die gleiche Höhe einnehmen. Es funktioniert gut in allen Browsern außer für Safari in macOS.

Demo

Ausgabe Screenshot(von der Demo):

Answer 1

ich ein paar Änderungen an der CSS gemacht und habe es funktioniert.

Das übergeordnete Element der button muss flexbox haben, damit die Schaltfläche flexibel wird.

.parent-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.child-1 { 
 
    display: flex; 
 
    flex: 1; 
 
    order: 2; 
 
} 
 

 
.child-2 { 
 
    order: 1; 
 
} 
 

 
.child button { 
 
    flex: 1; 
 
    white-space: normal; 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="parent-container"> 
 
    <div class="child child-1 col-xs-6"> 
 
    <button class="btn btn-primary">Customize Feed</button> 
 
    </div> 
 
    <div class="child child-2 col-xs-6"> 
 
    <button class="btn btn-default">Really Really Really Really Really Really Long CTA text</button> 
 
    </div> 
 
</div>

JSFiddle