html - 带Flex的内联表单，Safari中的错误

我用flex创建简单的内联表单。
但在Safari中，我发现一个错误按钮失去宽度，这是截图：
在所有其他浏览器中都很好。
如何在Safari中修复此错误？
附言：我不能设置按钮的固定宽度。
这是我的代码：

<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

最佳答案

将此添加到按钮：

button {
  …
  flex: none;
}

关于html - 带Flex的内联表单，Safari中的错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36784485/