Decreasing font size dynamically in relative containers

Question

So we have a slider .outer which scales height by the width of viewport and example slide li .inner, what has some text in it. Now when we decrease the window width the slide li .inner will not fit in the .outer, thus parts of text getting hidden.

What I wanted to do was to add a font-size: x% to slide .inner whenever window is resized and .inners height is greater than .outer. So by 5% for example it would go down by intervals 95%, 90% 85% until .inner slide would smaller height than slider .outer .

unworking example: https://codepen.io/rKaiser/pen/JOQQWY?editors=1111

$(window).on('load resize',function() {
  var inn = $('.inner');
  var inner = $('.inner').outerHeight();
  var outer = $('.outer').outerHeight();
  if (inner > outer) {
      var i;
      for (i = 100; i > 50;i--){
      inn.css('font-size', i+'%' )
      i--;
      }
 }
console.log('outer ' + outer);
console.log('inner ' + inner);
});

I was hoping somehow using for loop to decrease font-size percent on resize but im not sure even if can be done like this.

Answer 1

    $(window).on("load resize", function() {
      var inn = $(".inner");
      var inner = $(".inner").outerHeight();
      var outer = $(".outer").outerHeight();
      if (inner<outer) {
        //while (inner > outer) {
        var i;
        for (i = 100; i > 50; i--) {
          $(".inner").css("font-size",i+'%');
          i--;
        }
      }
      // }
      //inn.css('font-size', '70%');

      console.log("outer " + outer);
      console.log("inner " + inner);
    });