Making a textarea auto-fit inside a div

HTML & CSS
1

This should be so simple, I must be missing something really obvious here. In the html below, which is a simple textarea inside a fixed-width DIV, I want to make the textarea fit itself width-wise within the width of the div, with a nice little margin around the outside.

The result I want is this:

But what I’m getting is this:

Can someone advise me as to what the correct css should be, so the textarea resizes to the width of the div, with a 5px margin around the edge?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <style>
      #container { border: 1px solid #808080; width: 500px }
      #txtarea { border: 1px solid #f0f040; background-color: #fffff0; width: 100%; padding: 4px; margin: 5px; }
    </style>
  </head>

  <body>
    <div id="container">
      <textarea id="txtarea" cols="50" rows="5">
        text box with padding and margin inside a fixed width div.
        how do I made the text box auto-fit nicely inside the div?
      </textarea>
    </div>
  </body>

</html>