title: Setting font-size based on height of flexbox container
body: <p>I am wondering if it possible to set the font-size using the height of flexbox items. I have a flexbox container set using viewport units and the height of the items are determined by flex-grow property. What I am looking do is set the font-size to the height of these items, and to retain these relationships as the viewport changes. </p>
  
  <p>I have a basic idea that is somewhat working but I am not exactly sure how to isolate only the letter (baseline to cap height) and scale that to the item container.</p>
  
  <p><a href="https://codepen.io/NewbCake/pen/JvwNJq" rel="noreferrer">https://codepen.io/NewbCake/pen/JvwNJq</a>
  (resize window vertically to set font-size)</p>
  
  <p>I am open to any suggestions on how to approach this or any pitfalls that this may encounter. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;section class="center"&gt;
    &lt;div class="container"&gt;
      &lt;div class="item1"&gt;H&lt;/div&gt;
      &lt;div class="item2"&gt;H&lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>section {
    display:flex;
    flex-direction:row;
    height:95vh;
    width:100%;
    border:1px solid red;
  }
  
  .container {
    display:flex;
    flex-direction:column;
    height:80vh;
    width:80vh;
    border:1px solid blue;
  }
  
  .container_wide {
    display:flex;
    flex-direction:column;
    height:80vh;
    width:80vh;
    border:1px solid blue;
  }
  
  .center {
    justify-content:center;
    align-items:center;
  }
  
  .item1 {
    flex-grow:1;
    flex-shrink:0;
    flex-basis:auto;
    border:1px solid green;
    line-height:.75;
  }
  
  .item2 {
    flex-grow:3;
    flex-shrink:0;
    flex-basis:auto;
    border:1px solid green;
    line-height:.75;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var resizeTimer;
  
  $(window).on('resize', function(e) {
  
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
  
      // Run code here, resizing has "stopped"
      $(".item1").css("font-size", $(".item1").css("height"));
      $(".item2").css("font-size", $(".item2").css("height"));            
    }, 250);
  });
  </code></pre>
  
  <p>Any help is appreciated! </p>