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添加到input样式。否则，宽度为100%，加上边框和填充。