title: Allow a textarea resize to shrink (not just grow) element from its original/default size
body: <p>I am trying to create a <code>textarea</code> element that has a programmatically-defined original/default size, but which the user can resize within defined limits that allow it to both grow and shrink.</p>
  
  <p>I have tried setting the <code>resize</code>, <code>min-width</code>, <code>max-width</code>, and <code>width</code> properties of the text-area, but, thus far, this only allows the user to <em>grow</em> the <code>textarea</code> element, not <em>shrink</em> it. The browser will allow the user to size and resize the element within the bounds of <code>width</code> and <code>max-width</code>, not between the bounds of <code>min-width</code> and <code>max-width</code>, as intended.</p>
  
  <p>Is there a simple way of specifying a <em>default</em> size that will not also be treated as a <em>minimum</em> size?</p>
  
  <hr>
  
  <p>Here is the code I am working with:</p>
  
  <pre><code>function textAreaWithDefault(size) {
      var ta = document.createElement("textArea");
  
      ta.style.resize = "both";
      ta.style.minWidth = "100px";
      ta.style.width = size + "px";    // default size
      ta.style.maxWidth = "500px";
  
      document.body.appendChild(ta);
  } 
  </code></pre>
  
  <p>A pure css and/or javascript solution is preferred, but it only has to work on web-kit. </p>