フレックス付きのインラインフォーム、サファリのバグ

Question

フレックスで簡単なインラインフォームを作成します。 しかしサファリで私はバグを見つけた - ボタンが幅を失う、ここにスクリーンショットです：

他のすべてのブラウザですべて良い。

サファリにこのバグを修正するにはどうすればよいですか？ PS：ボタンで固定幅を設定できません。

<div class="container"> 
    <div class="row"> 
    <div class="col-md-3"> 
     <form action="" class="form-inline-flex"> 
     <div> 
      <input type="text" /> 
     </div> 
     <button type="submit" />Subscribe</button> 
     </form> 
     </div> 
    </div> 
</div> 


.form-inline-flex{ 
    display: -ms-flexbox; 
    display: -webkit-flex ; 
    display: flex; 
} 

button{ 
    display:inline-block; 
    padding: 13px 28px; 
    font-weight: 700; 
    text-align: center; 
    cursor: pointer; 
    border: 1px solid transparent; 
    padding: 13px 20px; 
    font-size: 16px; 
    line-height: 1.375; 
} 

input{ 
    display: block; 
    width: 100%; 
    font-size: 14px; 
    padding: 7px 18px; 
    line-height: 34px; 
    color: #000; 
    border: 1px solid #d2d1d1; 
} 

CodePen

Answer 1

があなたのボタンにこれを追加します：

はここに私のコードです

button { 
    … 
    flex: none; 
}