I have created a simple inline form using flexbox. However, I encountered an issue in Safari where the button loses its width. Here is a screenshot for reference: https://i.stack.imgur.com/3s5AR.jpg
Interestingly, the form looks fine in all other browsers. You can see how it's supposed to look here: https://i.stack.imgur.com/x5TpK.jpg
Any suggestions on how to fix this bug specifically in Safari? Please note that setting a fixed width on the button is not an option.
Below is a snippet of my code:
<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;
}