Glitch flexbox в каком-то мобильном браузере

Question

Я создаю контактную форму только с одним полем (электронная почта) и кнопкой отправки, прикрепленной справа.Я использовал flexbox для его создания, но в некоторых мобильных браузерах у меня возникает сбой, и это действительно раздражает:

Это мой код:

HTML

<!-- Newsletter start -->
<div class="newsletter-wrap-flex margin-top-div">
  <div class="newsletter-title">
    <span>
      NEWSLETTER
    </span>
  </div>
  <div class="newsletter-form">
    <form id="newsletter-cf" method="post" action="">
      <input id="contact-email" type="email" placeholder="Your email" required/>
      <input id="contact-send" class="submit" type="submit" value="Subscribe" />
    </form>
    <div id="message-sent">Congratulation! Your request has been sent.</div>
  </div>
</div>
<!-- Newsletter finish -->

CSS

/* Newsletter section */

.newsletter-wrap-flex {
  display: -webkit-box;  /* Old - iOS 6-, Safari 3.1-6 */
  display: -webkit-flex; /* New - Chrome */  
  display: flex;
  -webkit-box-flex-wrap: wrap; /* Old - iOS 6-, Safari 3.1-6 */
  -webkit-flex-wrap: wrap; /* Chrome */  
  flex-wrap: wrap;
}

.newsletter-title {
  font-size: 24px;
  text-transform: uppercase;
  color: $primary-color;
}

#message-sent {
  display: none;
  text-align: right;
}

.newsletter-title {
  -webkit-box-flex: 0 1 30%; /* Old - iOS 6-, Safari 3.1-6 */
  -webkit-flex: 0 1 30%; /* Chrome */   
  flex: 0 1 30%;
  align-self: center;
}

.newsletter-form {
  -webkit-box-flex: 0 1 70%; /* Old - iOS 6-, Safari 3.1-6 */
  -webkit-flex: 0 1 70%; /* Chrome */   
  flex: 0 1 70%;
  align-self: center;
}

#newsletter-cf {
  display: -webkit-box;  /* Old - iOS 6-, Safari 3.1-6 */
  display: -webkit-flex; /* New - Chrome */  
  display: flex;
  -webkit-box-justify-content: flex-end; /* Old - iOS 6-, Safari 3.1-6 */
  -webkit-justify-content: flex-end; /* Chrome */   
  justify-content: flex-end;
}

#contact-email {
  -webkit-box-flex: 0 1 80%; /* Old - iOS 6-, Safari 3.1-6 */
  -webkit-flex: 0 1 80%; /* Chrome */   
  flex: 0 1 80%;
  border: 1px solid $primary-color;
  border-right: none;
  padding-left: 10px;
  padding-right: 10px;
  color: $secondary-color;
}

#contact-email::-webkit-input-placeholder {
  color: $placeholder;
}

#contact-send {
  -webkit-box-flex: 0 1 20%; /* Old - iOS 6-, Safari 3.1-6 */
  -webkit-flex: 0 1 20%; /* Chrome */   
  flex: 0 1 20%;  
  height: 30px;
  padding-left: 15px;
  padding-right: 15px;
  cursor: pointer;
  font-family: $font-family;
  font-size: 14px;
  border: 1px solid $primary-color;
  color: $primary-color;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $gradient-two), color-stop(100%, $gradient-one)); /* Safari 4 +, Chrome */
  background: -webkit-linear-gradient(270deg, $gradient-two 0%, $gradient-one 100%); /* Safari 5.1 +, Chrome10 + */
  background: linear-gradient(180deg, $gradient-two 0%, $gradient-one 100%); 
}

#contact-send:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $gradient-one), color-stop(100%, $gradient-two)); /* Safari 4 +, Chrome */
  background: -webkit-linear-gradient(270deg, $gradient-one 0%, $gradient-two 100%); /* Safari 5.1 +, Chrome 10 + */
  background: linear-gradient(180deg, $gradient-one 0%, $gradient-two 100%); 
}

МЕДИА-ЗАПРОСЫ

/* Media queries */

@media only screen and (max-width: 767px)  {

  .newsletter-wrap-flex {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    margin-top: 10px;
  }

  .newsletter-form {
    -webkit-box-flex: 0 1 100%; /* Old - iOS 6-, Safari 3.1-6 */
    -webkit-flex: 0 1 100%; /* Chrome */    
    flex: 0 1 100%;
  }

  .newsletter-title {
    -webkit-box-flex: 0 1 100%; /* Old - iOS 6-, Safari 3.1-6 */
    -webkit-flex: 0 1 100%; /* Chrome */     
    flex: 0 1 100%;
    margin-bottom: 10px;
  }

  #message-sent {
    text-align: left;
  }

}

Я пытаюсь разделить эти два элемента, давая 80% и 20%, но я все еще не понимаю, почему в некоторых мобильных браузерах я получаю этокажется, что ширина коллапсирует.

Есть идеи?