title: Auto height problem in responsive web design
body: <p>I am making a responsive login page and i did everything correctly this is my html code</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>body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #c6faff;
    font-family: Segoe WP Black;
  }
  .form-box {
    position: absolute;
    width: 715px;
    height: auto;
    min-height: 400px;
    background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
    opacity: .8;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
    border-radius: 5px;
    color: black;
  
  }
  .form-left-side {
    position: relative;
    float: left;
    width: 50%;
    max-width: 337px;
    background-color: #fff1ff;
    height: 100%;
    min-height: 400px;
    padding: 7px;
    border: 3px solid black;
    color: black;
  }
  .form-right-side {
    position: relative;
    float: left;
    width: 50%;
    max-width: 337px;
    height: 100%;
    padding-left: 15px;
    min-height: 400px;
    background-color: #fff1ff;
    padding: 7px;
    border: 3px solid black;
    border-left: none;
    color: black;
    padding-left: 10px;
  }
  .text-field {
    margin-top: 20px;
    border: none;
    outline: none;
    opacity: .9;
    padding: 7px;
    background: none;
    border-bottom: 2px solid #2196F3;
    transition: .5s;
  }
  .submit {
    background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
    color: white;
    padding: 7px;
    width: 160px;
    height: 50px;
    font-size: 15px;
    border: 2px solid grey;
    font-weight: bold;
    font-family: Segoe WP Black;
    cursor: pointer;
    transition: .7s;
    outline: none;
    border-radius: 20px 0px 20px 0px;
  }
  .text-field:focus {
    padding: 8px;
    border-bottom: 3px solid black;
    font-size: 16px;
  }
  .submit:hover {
    border-radius: 0px 20px 0px 20px;
    box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
    width: 170px;
    height: 60px;
    transition: .7s;
  }
  .text-field::placeholder {
    color: black;
    opacity: 1; /* Firefox */
    font-size: 13px;
  }
  
  .text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
    opacity: .8; /* Firefox */
    font-size: 13px;
  }
  
  .text-field::-ms-input-placeholder { /* Microsoft Edge */
    color: red;
    opacity: .8; /* Firefox */
    font-size: 13px;
  }
  @media screen and (max-width: 730px) {
    .form-box {
      width: 100%;
      height: auto;
      min-height: 0;
      left: 0;
      bottom: 0;
      transform: translate(-0, 0);
    }
    .form-left-side {
      position: relative;
      width: 97.1%;
      float: none;
      display: block;
      max-width: none;
      min-height: 300px;
      height: auto;
      text-align: center;
    }
    .form-right-side {
      position: relative;
      width: 96.7%;
      float: none;
      display: block;
      border-left: 3px solid black;
      max-width: none;
    }
    .text-field {
      width: 70%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;html&gt;
          &lt;head&gt;
            &lt;title&gt;Form&lt;/title&gt;
            &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
            &lt;meta name="viewport" content="width=device-width, intital-scale=1"&gt;
          &lt;/head&gt;
          &lt;body&gt;
            &lt;div class="form-box"&gt;
              &lt;div class="form-left-side"&gt;
                &lt;center&gt;&lt;h2 style="font-size:20px;"&gt;Register For Best Performance&lt;/h2&gt;
                &lt;p&gt;When You Register at This Site You Can Use Our Features
                   And Have The Best Performance Here Thank You For Joining Us!&lt;br&gt;
                Never Foget This You Can Do Anything at This Site And
                 This is For Everyone And We Won't do Building a Website For Just Somebody !
                &lt;/p&gt;
                &lt;/center&gt;
              &lt;/div&gt;
              &lt;div class="form-right-side"&gt;
                &lt;h2&gt;Login&lt;/h2&gt;
                &lt;form&gt;
                  &lt;label for="fname"&gt;Username: &lt;/label&gt;&lt;br&gt;&lt;center&gt;
                  &lt;input type="text" name="fname" value="" class="text-field" placeholder="Username" /&gt;
                  &lt;br /&gt;&lt;br /&gt;&lt;br&gt;&lt;/center&gt;
                  &lt;label for="fname"&gt;Password: &lt;/label&gt;
                  &lt;br /&gt;&lt;center&gt;
                  &lt;input type="password" name="password" value="" class="text-field" placeholder="Password" /&gt;
                  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/center&gt;
                  &lt;center&gt;&lt;input type="submit" name="submit" value="Submit" class="submit"&gt;
                    &lt;br&gt;&lt;/center&gt;
                &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/body&gt;
          &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I resize the screen down to 730 pixel that works correct but my text in form-left-side goes up and there is not something that I can scroll and my text first lines are not visible 
  notice that i don't wanna take my min-height to lower and i want it to be 300 px if you can help me thank you</p>
  
  <p>and loook also when it is runing on snippet on this site you can not scroll up so that is a problem
  and my browser is opera</p>