Getting text to shrink dynamically within 'flex-shrink-0' (TailwindCSS)

I have an 'Album' (React) component that includes the albums artwork, name and release date. It's essentially a card-looking component that's broken into two divs: The photo and the text. The album component is rendered for every different album in an artist's discography.

The album artwork is the same size for every album, but the album name varies in length from album to album. When rendering tens of album components, the cards were all created in different sizes, depending on the length of the album name. Wanting a uniform look for all the rows of albums, I added 'flex' and then 'flex-shrink-0' which forces the albums to all stay the same size.

That solved the uniform sizing problem, but created a new one - now the album names that are long overflow into their neighboring components. I can add 'overflow-hidden' to the parent div, but what I'd really like to do is dynamically force the text to shrink so that it fits in the uniform album size without overflow.

I've tried looking through Tailwind's docs to find a solution, but so far nothing has worked. I've tried 'object-contain' and 'break-normal', no luck there. I think it's possible that the 'flex-shrink-0' might not be allowing the text to shrink - my intention when adding it was to force the text container div not to shrink, not the text itself. If I remove 'flex-shrink-0', I may be able to use some of these solutions to dynamically shrink the text, but then my cards will not be forced to all be the same size, and then I'm back to my original problem...

To summarize my question: Is it possible for me to have uniformly sized cards with dynamically sized text inside of them? Meaning, can I have dynamically sized text within a div that has 'flex-shrink-0' on it? Preferably in Tailwind?

Here's the code to my Album component:

import React from "react";

export const Album = (props: any) => {
  return (
    <div className="max-w-xs rounded overflow-hidden shadow-lg m-auto transform transition duration-300 hover:scale-110">
      <div className="object-fill">
        <a
          href={props.album.external_urls.spotify}
          target="_blank"
          rel="noreferrer"
        >
          <img alt={"Album Cover"} src={props.album.images[1].url} />
        </a>
      </div>
      <div className="flex">
        <div className="px-6 py-4 flex-shrink-0">
          <div className="font-bold text-purple-500 text-lg mb-2">
            {props.album.name}
          </div>
          <div className="font-bold text-black-500 text-md mb-2">
            {props.album.release_date.replaceAll("-", "/")}
          </div>
        </div>
      </div>
    </div>
  );
};

Example of several albums that depict the text sizing problem