テキストボックスの幅を100%にしたときに親要素からはみ出る問題を解決する
CSSでテキストボックスの幅を100%にしたときに親要素からはみ出る問題を解決する方法を紹介します。
以下のように、親要素に対して100%のサイズのテキストボックスを配置すると、親要素をはみ出してしまいます。
<div style="width: 300px; border: solid 1px #000;">
<div>
<input type="text" style="width: 100%;" value="幅100%">
</div>
<div>
<input type="text" style="width: 50%;" value="幅50%">
</div>
</div>原因
テキストボックスのサイズ（100%）に枠線（ボーダー）の幅は含まれていません、
そのため、100%のテキストボックス + 左右のボーダー1pxずつがトータルの幅になり、親要素を超えてしまいます。
対処法
サイズにボーダーの幅も含めて計算したい場合は、box-sizing: border-box;のスタイルを指定します。
box-sizing: border-box;を指定した要素はサイズの計算にボーダー（border）の幅と余白（padding）の幅を含めるようになります。（100%の幅の中にボーダーや余白が含まれる）
<div style="width: 300px; border: solid 1px #000;">
<div>
<input type="text" style="width: 100%; box-sizing: border-box;" value="幅100%">
</div>
<div>
<input type="text" style="width: 50%; box-sizing: border-box;" value="幅50%">
</div>
</div>