FlowType.js and flexbox doesn't work together

Question

so Iam using FlowType.JS it works and the text become I mean the the text become responsive. but if I wrote display: flex; or width: fit-content; the FlowType.JS code doesn't work

jsfiddle

/*
* FlowType.JS v1.1
* Copyright 2013-2014, Simple Focus http://simplefocus.com/
*
* FlowType.JS by Simple Focus (http://simplefocus.com/)
* is licensed under the MIT License. Read a copy of the
* license in the LICENSE.txt file or at
* http://choosealicense.com/licenses/mit
*
* Thanks to Giovanni Difeterici (http://www.gdifeterici.com/)
*/

(function($) {
   $.fn.flowtype = function(options) {

// Establish default settings/variables
// ====================================
      var settings = $.extend({
         maximum   : 9999,
         minimum   : 1,
         maxFont   : 9999,
         minFont   : 1,
         fontRatio : 35
      }, options),

// Do the magic math
// =================
      changes = function(el) {
         var $el = $(el),
            elw = $el.width(),
            width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
            fontBase = width / settings.fontRatio,
            fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
         $el.css('font-size', fontSize + 'px');
      };

// Make the magic visible
// ======================
      return this.each(function() {
      // Context for resize callback
         var that = this;
      // Make changes upon resize
         $(window).resize(function(){changes(that);});
      // Set changes on load
         changes(this);
      });
   };
}(jQuery));



  $('.about__text__p').flowtype({
    minimum   : 100,
    maximum   : 1920,
    fontRatio : 34.2
  });
  $('.about__text__ul').flowtype({
    minimum   : 100,
    maximum   : 1920,
    fontRatio : 44.4
  });

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.about {
  /* display: flex; */
}
.about__text__p {
  /* width: fit-content; */
  background-color: rgba(255, 0, 0, 0.5);
  white-space: pre-line;
}
.about__text__ul {
  /* width: fit-content;*/
  background-color: rgba(0, 0, 255, 0.5);
  list-style: none;
}
.about__text__ul__li {
  display: inline-block;
  font-size: inherit;
  margin-right: 10px;
}

<section class="about">
  <div class="about__text">
    <p class="about__text__p">first line first line
second line second line
third line third line</p>
    <ul class="about__text__ul">
      <li class="about__text__ul__li">AAAA</li>
      <li class="about__text__ul__li">BBBB</li>
      <li class="about__text__ul__li">CCCC</li>
    </ul>
  </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>