title: Box-sizing: how to get rid of the scrollbar padding in Firefox
body: <p>Here's a sample code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt; 
  &lt;head&gt; 
  &lt;title&gt;Sample Textarea&lt;/title&gt;
  &lt;style type="text/css"&gt;
  * {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;}
  &lt;/style&gt; 
  &lt;/head&gt;  
  &lt;body&gt; 
  &lt;form action="#"&gt;
  &lt;textarea rows="1" cols="1"&gt;This is some text.&lt;/textarea&gt;
  &lt;/form&gt; 
  &lt;/body&gt;  
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>