Here's a sample code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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;}
<form action="#">
<textarea rows="1" cols="1">This is some text.</textarea>
I used the box-sizing property to set the textarea width to 100% plus some padding and it works in all major browsers. However, in Firefox if you add more content to the textarea, you'll see unwanted padding around the scrollbar.

Many thanks for any help!