Here is a sample code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Sample Textarea</title> <style type="text/css"> * {width:100%; height:100%; margin:0; border:0; padding:0; background:#D3D3D3;} textarea {overflow:auto; box-sizing:border-box; -moz-box-sizing:border-box; padding:6px;} </style> </head> <body> <form action="#"> <textarea rows="1" cols="1">This is some text.</textarea> </form> </body> </html>
I used the box-sizing property to set the width of textarea to 100% plus some addition and works in all major browsers. However, in Firefox, if you add more content to the text box, you will see an unwanted addition around the scrollbar.
source share