title: Scale any text in fixed-size <div> as much as possible
body: <p>I have a fixed size <code>&lt;header&gt;</code> (let's say 300px in width by 200px in height) and a text inside. Here's my structure:</p>
  
  <p>Header 1:</p>
  
  <pre><code>&lt;header&gt;
    &lt;h1&gt;
       This is example title, but the text length might be different.
    &lt;/h1&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>I have multiple headers just like this, but with various text length, example:</p>
  
  <p>Header 2:</p>
  
  <pre><code>&lt;header&gt;
    &lt;h1&gt;
       This is small-length text.
    &lt;/h1&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Header 3:</p>
  
  <pre><code>&lt;header&gt;
    &lt;h1&gt;
       This is bigger-length text. This is example title, but the text length might be different.
    &lt;/h1&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>I want scale the text font-size in this fixed-size <code>&lt;header&gt;</code> as much as possible (without exceeding the <code>&lt;header&gt;</code> bounds, in width and height). And I want to do it dynamically, so it matches any text length. Do you have any ideas how I can do that?</p>
  
  <p>PS: Here's a JS fiddle that illustrates the problem: <a href="https://jsfiddle.net/superKalo/nqf46tft/" rel="nofollow">https://jsfiddle.net/superKalo/nqf46tft/</a></p>
  
  <p>Edit: I assume a CSS only solution is not possible. Do you know any javascript trick that would solve this problem?</p>