CSS - Wejście o szerokości 100% zachodzi na siebie div

Question

Próbuję naprawić zwykłe pole wprowadzania z dopełnieniem, obramowaniem, wewnątrz elementu div z dopełnieniem. Jednak chcę, aby wejście miało szerokość równą 100%, ale jak widać, pokrywa się. Jak to naprawić?

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

Dodaj box-sizing: border-box. W przeciwnym razie szerokość wynosi 100%, PLUS obramowanie i dopełnienie.