input、textarea宽设定100%时超出父容器

在设置input的宽度为100%时，有时候会造成浏览器出现横向滚动条，超出了页面的宽度，如何解决这个问题呢？

<form style="width: 333px;border: 1px red solid;">
    <input type="text" placeholder="input>text" style="width:100%;"><br>
    <textarea placeholder="textarea" style="width:100%;"></textarea><br>
</form>

父级容器form宽度给了固定值，子标签input、textarea宽度都设为100%。

页面效果：

可以发现input、textarea均超出了父级容器form。这样的效果显然是不合理的，如何解决呢？

方法很简单，只需在css中加入：

input,textarea {
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Firefox */
    -moz-box-sizing: border-box;     /* Safari */
}

页面效果：

父级容器成功将内部input、textarea包裹，问题解决。