HTML Textareas 設定 100% width 的 overflow(設定寬度 100% 顯示不正確)

最近在發現在使用 Textareas 的時候，把它的寬度(width)設為 100% 它竟然會超過父容器，而對它下 overflow 的屬性看起來也不太對，問題如下:

overflow  

1. <div style="background-color: #ffbbbb; margin: 0px auto; width: 50%;">
2.     overflow
3.     <textarea style="width: 100%;"></textarea>
4. </div>

原因是因為 textarea 通常有自己預設的 margin、padding 及 border 會讓它撐出而外的空間，解決方法有兩個，一個當然就是覆寫 textarea 的 margin、padding 及 border，另一個只要將父容器設定 padding-right 就可以達成目的囉！(實際要 padding 幾 px 請自行計算 teaxarea 的預設 margin、padding 及 border) 修改後的結果如下:

fix-overflow

1. <div style="background-color: #ffbbbb; margin: 0px auto; padding-right: 6px; width: 50%;">
2.     fix-overflow
3.     <textarea style="width: 100%;"></textarea>
4. </div>