Input overflows container

Question

I have a problem where setting width: 100% to inputs inside a container extends more than the container capacity. This problem doesn't seems to happen with buttons though:

<form>    
  <input type="text" class="input"></input>    
  <button>Button</button>
</form>

CSS:

form {
  max-width: 200px;  
  border: 1px solid #eee;   
}

.input, button {
  width: 100%;
}

In this example, the button correctly fills the container, however the input extends a bit further:

How can I fix this?

I've created a codepen: http://codepen.io/jviotti/pen/qfFmH

Answer 1

You can fix this adding

.input, button {
  width: 100%;
  box-sizing: border-box; /* add this */
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
}

box-sizing - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing