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

why 100% width on inputfield/textfield overlap 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 problem causes overlap? why can not set width of textfield 100%?

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

kind regards

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

the box-sizing fixes because ensures rendered input field specified width.