textareas of minimum size for content?

so textarea for something like "look" or "inventory" seems at a glance to be the natural approach, but it is terrible from a web UI design perspective from the GM's side - when you have multiple sheets open, you need them to take up as little screen real estate as possible, so having the text area take up extra space is really annoying. However, having the content get covered because the textarea is too small to contain the text... also annoying.  do people just... ignore this? set the number of rows in an onchange event?  is there a way to use a contenteditable div instead of a textarea?  

Auto-expanding textareas are a thing people have discovered. I don't know if there's a reference somewhere, but the basic pattern goes like this: <div class="auto-expand"><span name="attr_foo"></span> <textarea spellcheck="false" name="attr_foo"></textarea> </div> .sheet-auto-expand { position: relative; cursor: text; word-wrap: break-word; box-sizing: border-box; } .sheet-auto-expand span { visibility: hidden; white-space: pre-wrap; display: block; } .sheet-auto-expand textarea { position: absolute; overflow: hidden; z-index: 1; top: 0; left: 0; margin: 0; resize: none; height: 100%; word-wrap: break-word; padding: inherit; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; text-align: inherit; box-sizing: border-box; } (I may have forgotten a thing or two, these are copied out of an existing sheet). contenteditable div doesn't work, as far as I can tell.