Allow a textarea resize to shrink (not just grow) element from its original/default size

Question

I am trying to create a textarea 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.

I have tried setting the resize, min-width, max-width, and width properties of the text-area, but, thus far, this only allows the user to grow the textarea element, not shrink it. The browser will allow the user to size and resize the element within the bounds of width and max-width, not between the bounds of min-width and max-width, as intended.

Is there a simple way of specifying a default size that will not also be treated as a minimum size?

---

Here is the code I am working with:

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);
} 

A pure css and/or javascript solution is preferred, but it only has to work on web-kit.

Answer 1

I would look into fittext or similar scripts: http://fittextjs.com/

This does exactly what you are describing.