CSS - 100 % 너비 입력시 div가 겹칩니다.

Question

패딩이있는 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>​ 

Answer 1

box-sizing: border-box를 추가합니다. 그렇지 않으면 너비가 100%이고 테두리와 패딩이 더해집니다.