title: CSS Input with width: 100% goes outside parent's bound
body: <p>I'm trying to make a login form with two input fields with an inset padding, but they end up exceeding the parent's bounds. What's causing this?</p>
  <p>JSFiddle snippet: <a href="http://jsfiddle.net/4x2KP/" rel="noreferrer">http://jsfiddle.net/4x2KP/</a></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>    #mainContainer {
          line-height: 20px;
          font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
          background-color: rgba(0,50,94,0.2);
          margin: 20px auto;
          display: table;
          -moz-border-radius: 15px;
          border-style: solid;
          border-color: rgb(40, 40, 40);
          border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
          border-radius: 2px;
          border-radius: 2px 5px / 5px;
          box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
      }
      
      .loginForm {
          width: 320px;
          height: 250px;
          padding: 10px 15px 25px 15px;
          overflow: hidden;
      }
      
      .login-fields &gt; .login-bottom input#login-button_normal {
          float: right;
          padding: 2px 25px;
          cursor: pointer;
          margin-left: 10px;
      }
      
      .login-fields &gt; .login-bottom input#login-remember {
          float: left;
          margin-right: 3px;
      }
      
      .spacer {
          padding-bottom: 10px;
      }
      
      /* ELEMENT OF INTEREST HERE! */
      input[type=text],
      input[type=password] {
          width: 100%;
          height: 20px;
          padding: 5px 10px;
          background-color: rgb(215, 215, 215);
          line-height: 20px;
          font-size: 12px;
          color: rgb(136, 136, 136);
          border-radius: 2px 2px 2px 2px;
          border: 1px solid rgb(114, 114, 114);
          box-shadow: 0 1px 0 rgba(24, 24, 24,0.1);
      }
      
      input[type=text]:hover,
      input[type=password]:hover,
      label:hover ~ input[type=text],
      label:hover ~ input[type=password] {
          background:rgb(242, 242, 242) !important;
      }
      
      input[type=submit]:hover {
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.3),
          inset 0 -10px 10px rgba(255,255,255,0.1);
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div id="mainContainer"&gt;
          &lt;div id="login" class="loginForm"&gt;
              &lt;div class="login-top"&gt;
              &lt;/div&gt;
              &lt;form class="login-fields" onsubmit="alert('test'); return false;"&gt;
                  &lt;div id="login-email" class="login-field"&gt;
                      &lt;label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;"&gt;E-mail address&lt;/label&gt;
                      &lt;span&gt;&lt;input name="email" id="email" type="text"&gt;&lt;/input&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="spacer"&gt;&lt;/div&gt;
                  &lt;div id="login-password" class="login-field"&gt;
                      &lt;label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;"&gt;Password&lt;/label&gt;
                      &lt;span&gt;&lt;input name="password" id="password" type="password"&gt;&lt;/input&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="login-bottom"&gt;
                      &lt;input type="checkbox" name="remember" id="login-remember"&gt;&lt;/input&gt;
                      &lt;label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;"&gt;Remember my email&lt;/label&gt;
                      &lt;input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"&gt;&lt;/input&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>