title: How to adjust fontsize to fit textarea width and height as much as possible?
body: <p>I enter text into a <code>textarea</code>. I wish the fontsize to be adjusted dynamically such that the text fills up the available <code>textarea</code> with type as much as possible. For this I use a <code>span</code> with <code>display:none</code> style in the background to measure the width of the currently entered text and rescale it to the available width. I have problems with the logic and the browser though:</p>
  
  <ol>
  <li>The <code>span</code> scales with the available browser window size</li>
  <li>Short text should not necessarily scale down in font size, but could also wrap after one complete word, such that the textarea is also occupied in height (not only in width).</li>
  </ol>
  
  <p><a href="https://jsfiddle.net/736mh8so/18/" rel="nofollow noreferrer">Working fiddle to illustrate the idea.</a></p>
  
  <p>How would I adjust such that the textarea is filled as much as possible both in width and height?</p>