title: Inline form with flex, bug in safari
body: <p>I create simple inline form with flex. 
  But in safari I found a bug - button lose width, here is screenshot:<a href="https://i.stack.imgur.com/3s5AR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3s5AR.jpg" alt="safari"></a></p>
  
  <p>In all another browsers all good. <a href="https://i.stack.imgur.com/x5TpK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x5TpK.jpg" alt="another browsers"></a></p>
  
  <p>How to fix this bug in safari ?
  PS: I can`t set fixed width on button.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;
        &lt;form action="" class="form-inline-flex"&gt;
          &lt;div&gt;
            &lt;input type="text" /&gt;
          &lt;/div&gt;
          &lt;button type="submit" /&gt;Subscribe&lt;/button&gt;
        &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  .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;
  }
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/bpjBOO?editors=1100" rel="nofollow noreferrer">CodePen</a></p>