Inline form with flex, bug in safari

Question

I create simple inline form with flex. But in safari I found a bug - button lose width, here is screenshot:

In all another browsers all good.

How to fix this bug in safari ? PS: I can`t set fixed width on button.

Here is 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;
}

CodePen

Answer 1

Add this to your button:

button {
  …
  flex: none;
}