内联形式与flex，在safari中的bug

Question

我使用flex创建简单的内联表单。 但在safari中我发现了一个错误 - 按钮丢失宽度，这里是截图：

在所有其他浏览器中都很好。

如何修复Safari中的这个错误？ 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;
}