input要素でwidthに100%を設定すると親要素からはみ出てしまう

概要

input要素でwidthに100%を設定すると、親要素からはみ出てしまうことがあります。

次のcodepenで、上の方がwidthに100%を設定しただけの場合で、親要素（赤枠）からはみ出ていることがわかると思います。

See the Pen inputにwidth:100%を設定すると親要素からはみ出る by take it easy (@take-it-easy) on CodePen.

対応方法

デフォルトで幅や高さを設定する場合、borderやpaddingは含まれません。

元々、input要素にはborderやpaddingが設定されています。

そこで、要素の幅と高さに「borderとpaddingを含めるか」を指定することができる「box-sizing」で、「border-box」を設定することではみ出さないようになります。
（デフォルトでは「content-box」が設定されています。）

なお、ベンダープレフィックスが必要となる設定となります。

input {
  box-sizing: content-box;
  -moz-box-sizing: border-box;    // Firefox
  -webkit-box-sizing: border-box; // Google Chrome、Safari
  -o-box-sizing: border-box;      // Opera
  -ms-box-sizing: border-box;     // Internet Explorer
}

対応ブラウザに応じて、ベンダープレフィックスの設定も行いましょう。

参考

box-sizing – CSS: カスケーディングスタイルシート | MDN

box-sizing は CSS のプロパティで、要素の全体の幅と高さをどのように計算するのかを設定します。

developer.mozilla.org