Why does 100% width on inputfield/textfield overlap containing div?

Question

Why does 100% width on an inputfield/textfield overlap the containing div?

http://jsfiddle.net/lassebjensen/Uujck/3/

Css:

.red-div-400px{
    background-color:red;
    width:400px
}

.input{
    width: 100%;
    min-height: 28px;
}

Html:

<div class="red-div-400px">
E-mail  
<input  class="input" type="text">
</div>

This code below fixes the problem but what causes the overlap? Why can you not set the width of the textfield to 100%?

 width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box;

Kind Regards

Answer 1

The input field's width includes the padding and any border set, therefore 100% + 1px padding + 2px border = overlap.

The box-sizing fixes this because it ensures the rendered input field is the specified width.

Answer 2

You are forgetting the 2px borders (for each side).

You can use CSS3 Calc to avoid this problem:

width: calc(100% - 4px);

Demo: http://jsfiddle.net/Uujck/6/

To see which browser supports it, refer to CanIUse or similar sites: http://caniuse.com/#feat=calc

Answer 3

It's the padding of the input that causes this, and its borders. See the updated fiddle. If you inspect the input, you will see it don't overlap anymore :

.input 
{
    width: 100%;
    min-height: 28px;
    padding: 0;
    border: none;
}