Некорректное растягивание input'а в процентах

[Quebec]

Такая проблема, у меня задача поместить в div (который будет переменной длины), текстовый input который я пытаюсь растянуть на всю ширину родителя с помощью "width: 100%", но почему-то input вылезает за его пределы. Почему так происходит?
 

Пример кода: http://jsfiddle.net/ws7v3ued/31/

Edited October 4, 2014 by Quebec

[PanSoul]

У input'а уберите padding и border и будет счастье.

.input {     width: 100%;    padding: 0;    border: none;    background: #ccc;}

Если вам нужны бордеры и паддинги, и при этом чтобы input также не вылазил за пределы родителя, то используйте свойство box-sizing.

[Laroxx12]

http://jsfiddle.net/ws7v3ued/33/

box-sizing

[Quebec]

У input'а уберите padding и border и будет счастье.

.input {     width: 100%;    padding: 0;    border: none;    background: #ccc;}

Если вам нужны бордеры и паддинги, и при этом чтобы input также не вылазил за пределы родителя, то используйте свойство box-sizing.

 

Теперь все понятно. Спасибо большое.