title: Adjust text size in order to fit in div
body: <p>I have several divs containing various text (headers, paragraphs, ...) with font sizes in em.
  I want to detect if there is an overflow in these divs and then iterate while decreasing the font size until everything fit in the div.</p>
  
  <p>Right now my <code>scrollHeight</code> is always equal to the <code>clientHeight</code> and I do not detect the overflow.</p>
  
  <p>My divs are using flexbox and <strong>cannot</strong> have a fixed size in pixels!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var fitDivs = document.querySelectorAll("div[data-slide-fit]");
  fitDivs.forEach(function(fitDiv) {
    if (fitDiv.scrollHeight &gt; innerHeight(fitDiv)) {
      var style = window.getComputedStyle(fitDiv, null);
      var innerHeight = el.clientHeight
      for (iFontSize = 20; iFontSize &gt; 10; iFontSize--) {
        fitDiv.style['font-size'] = iFontSize + 'px';
        if (fitDiv.scrollHeight &lt; innerHeight) {
          break;
        }
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    height: 300px;
    width: 400px;
    margin: 20px;
    background-color: aqua;
  }
  
  .container&gt;div {
    width: 50%;
    padding: 10px;
  }
  
  h2 {
    font-size: 2.5em;
  }
  
  p {
    font-size: 1.3em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="column" data-slide-fit=""&gt;
      &lt;h2&gt;Column 1&lt;/h2&gt;
      &lt;p&gt;This is a very very very very very very very very very very very very very very very very very very very very very very very very very long text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column" data-slide-fit=""&gt;
      &lt;h2&gt;Column 2&lt;/h2&gt;
      &lt;p&gt;This is a an ven very very very very very very very very very very very very very very very very very very very very very very very very very very very very long text&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>