Fitty.js: how do I force a font size recalculation on mouseover?

I'm using Fitty https://github.com/rikschennink/fitty to fit text into divs, but I can't get this particular instance to work.

In the .title div, Fitty works, though there is a bit of overfow issue.

But in the .details div, which appears on hover, it stays at 16px. I'm using jQuery to force Fitty to recalculate on mouseover to fit the text in .details, but Fitty doesn't change the text font size. The font stays at the minSize and overflows, or it doesn't grow to maxSize when there is less text; see images.

The issue could to be that Fitty doesn't fit text to the container height; see https://github.com/rikschennink/fitty/issues/9 . But I tried the various fixes in that bug thread in the Fiddle and couldn't get any of them to work.

How can Fitty correctly fit the text in .details? Does it need to be force recalculated? Is the container height or width the problem?

I'd like to stay with the current HTML markup, if possible, but using display: grid is possible.

jsfiddle: https://jsfiddle.net/f2q9Lpya/1/ and Snippet below.

fitty('.details', {
  minSize: 10,
  maxSize: 20,
});

   fitty('.title', {
 minSize: 10,
 maxSize: 24,
   });

jQuery('.kitten_container')
  .on('mouseenter', function() {
    var fitties = fitty('.details');
    fitties[0].fit();
  });

.outer_container {
  width: 300px
}

.kitten_container {
  border: solid 1px #e6e6d6;
  padding: 10px;
  height: 280px;
  position: relative;
  overflow: hidden;
}

.overlay {
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  height: 75%;
  width: 100%;
  bottom: 30%;
  right: 0;
  opacity: 0;
}

.details {
  text-align: left;
  padding: 1em;
  height: 50%;
  top: 5%;
  opacity: 0;
  color: #fff;
  line-height: 16px;
  position: relative;
  z-index: 999;
}

.kitten_container:hover .details,
.kitten_container:hover .overlay {
  opacity: 1;
  -webkit-transition: all 0.1s ease-in-out 0s;
  -moz-transition: all 0.1s ease-in-out 0s;
  transition: all 0.1s ease-in-out 0s;
}

.image_container {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 150px;
}

.the-image {
  display: flex;
  align-items: center;
}

.bottom_container {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0px;
  padding: 10px;
  text-align: center;
}

.year_and_award {
  font-size: 18px;
  font-weight: 500;
}

.author_name {
  font-size: 16px;
}

.title {
  padding: 2px;
  display: inline-block;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fitty/2.3.7/fitty.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
      <div class="kitten_container">
        <div class="image_container">
          <div class="the-image">
            <img src="https://placekitten.com/150/150" alt="image">
          </div>
        </div>
        <div class="overlay">
          <div class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          </div>
        </div>
        <div class="bottom_container">
          <div class="year_and_award">2023 Kitten of the Year</div>
          <div class="author_name">Fuzzy</div>
          <div class="title">My Other Long Kitty Cat Life</div>
        </div>
      </div>
    </div>
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
      <div class="kitten_container">
        <div class="image_container">
          <div class="the-image">
            <img src="https://placekitten.com/g/150/150" alt="image">
          </div>
        </div>
        <div class="overlay">
          <div class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </div>
        </div>
        <div class="bottom_container">
          <div class="year_and_award">2022 Kitten of the Year</div>
          <div class="author_name">Fluffy</div>
          <div class="title">My Life as a Cat</div>
        </div>
      </div>
    </div>
  </div>
</div>

from Fitty.js: how do I force a font size recalculation on mouseover?