CSS - вход с шириной 100% перекрывает div

Я пытаюсь установить регулярное поле ввода с заполнением, границей, внутри div с заполнением. Тем не менее, я хочу, чтобы входные данные имели ширину 100%, но, как видите, она перекрывается. Как это исправить?

CSS

#one {
    background:red;
    width:300px;
    padding:5px;
}
#two {
    width:100%;
    border:3px solid blue;
    padding:4px;
}

HTML

<div id="one"><input type="text" value="Test" id="two" /></div>​

Ответы

Ответ 1

Добавить box-sizing: border-box. В противном случае ширина будет 100%, PLUS - граница и дополнение.