與顯示器撓性按鈕高度是不均勻的Safari

Question

我有下div封裝有以下結構的button：

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

兩個按鈕（包含長文本和短文本），應該佔據相同的高度，而不管其內容的長度。它適用於所有瀏覽器，除了適用於macOS中的Safari。

Demo

問題截圖（從演示）：

Answer 1

我做你的CSS一些改變，並得到它的工作。

button的父元素需要有flexbox才能使按鈕變爲flexible。

.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