Input overflows container

css, html

Solution

You can fix this with the `box-sizing` property like this :

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

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

Problem

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

Original source