title: Input shrinks when user starts typing
body: <p>The contactfields on my <a href="https://christoph-fricke.de" rel="nofollow noreferrer">website</a> are shrinking as soon as the user starts typing on a mobile device. I could not detect this behavior in a desktop browser window at any size.</p>
  
  <p>The contactfield is structured with the relativly new <code>css grid</code>.</p>
  
  <p>How to recreate the bug:</p>
  
  <ol>
  <li>Open my <a href="https://christoph-fricke.de" rel="nofollow noreferrer">website</a> on your mobile device</li>
  <li>Scroll down to the input field</li>
  <li>Focus one and start typing</li>
  </ol>
  
  <hr>
  
  <p>I already tried to fix it trough applying a <code>width</code> and <code>min-width</code> to the inputs but this did not fixed it.</p>
  
  <p>I gathered information in a spreadsheet about different browsers and devices to find out wether the bug appears or not.</p>
  
  <p><a href="https://docs.google.com/spreadsheets/d/1D3_7zh8u2MFAx5vt_mKCA9bjEI9crdDwwOSlucLLwfM/edit?usp=sharing" rel="nofollow noreferrer">https://docs.google.com/spreadsheets/d/1D3_7zh8u2MFAx5vt_mKCA9bjEI9crdDwwOSlucLLwfM/edit?usp=sharing</a></p>
  
  <p>I think that it might be a browser bug since <code>css grid</code> is relatively new?! Are you able to recreate the bug? Do you have any ideas how to fix it other than removing the <code>css grid</code> and structuring it with <code>flexbox</code>?</p>
  
  <p>I would like to try to get the browser companies notified if it appears to be a browser bug so they can fix it...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*I actually use SCSS so this code will not run */
  /* The grid */
  .grid__form {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "name email" "textarea textarea" "feedback submit";
    grid-gap: 10px;
    @media screen and (max-width: 500px) {
      grid-template-columns: 100%;
      grid-template-areas: "feedback" "name" "email" "textarea" "submit";
  }
  
  /* The contact form */
  .contact {
    grid-area: contact;
    margin-bottom: 100px;
    &amp;__header {
      font-size: 500;
      color: $text-dark-primary;
      font-size: 2rem;
      text-align: center;
      margin: 0 0 30px 0;
        @media screen and (max-width: 500px) {
        font-size: 1.5rem;
      }
      &amp;--link {
        text-decoration: none;
        color: rgba($color-secondary-400, 0.87);
        cursor: pointer;
        transition: $transition-standard;
        @media screen and (max-width: 359px) {
          font-size: 1.3rem;
        }
        &amp;:hover {
          text-decoration: underline;
        }
      }
    }
    &amp;__input {
      font-family: 'Roboto', 'Noto Sans', sans-serif;
      line-height: 1.5;
      font-size: 1rem;
      padding: 0.5em;
      border: 2px solid rgba(black, 0.20);
      border-radius: 2px;
      width: 100%;
      min-width: 100%;
      color: $text-dark-primary;
      background-color: white;
      cursor: text;
      outline: none;
      transition: $transition-standard;
      &amp;--name {
        grid-area: name;
      }
      &amp;--email {
        grid-area: email;
      }
      &amp;--textarea {
        grid-area: textarea;
        resize: none;
        min-height: 250px;
      }
      &amp;:focus {
        border: 2px solid $color-secondary-200;
        width: 100%;
        min-width: 100%;
      }
    }
    &amp;__submit {
      font-family: 'Roboto', 'Noto Sans', sans-serif;
      line-height: 1.5;
      grid-area: submit;
      justify-self: end;
    }
    &amp;__feedback {
      grid-area: feedback;
      align-self: center;
      margin: 0;
      font-size: 1rem;
      font-weight: 500;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form class="contact__form grid__form" action="_assets/php/sendMail.php" method="POST" novalidate&gt;
    &lt;input id="name" class="contact__input contact__input--name" type="text" name="name" placeholder="Name" /&gt;
    &lt;input id="email" class="contact__input contact__input--email" type="email" name="email" placeholder="Email" /&gt;
    &lt;textarea id="message" class="contact__input contact__input--textarea" type="text" name="message" placeholder="Message"&gt;&lt;/textarea&gt;
    &lt;p class="contact__feedback"&gt;&lt;/p&gt;
    &lt;button class="contact__submit button--raised" type="submit"&gt;submit&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>