CSS - Eingabe bei 100% Breite überlappt div

Question

Ich versuche, eine reguläre Eingabefeld mit Padding, Rahmen, in einem Div mit Padding zu beheben. Ich möchte jedoch, dass die Breite der Eingabe 100% beträgt, aber wie Sie sehen, überlappt sie sich. Wie behebe ich das?

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>​ 

Answer 1

box-sizing: border-box hinzufügen. Ansonsten ist die Breite 100%, PLUS der Rahmen und das Padding.