Today I learned how flex-shrink can mess up your width

I've been working on a fantasy pool app using Next JS and Tailwind CSS. I needed an episode selector component, and I figured it would take me about two minutes to write one. I was mostly right, but it took me a whole bunch of troubleshooting to get to what I was looking for. Basically, I wanted a horizontal scrolling bar with a button for each episode like so:

So I wrote it out like so, with the following result:

const EpisodeSelector = () => {

  return (
    <ul className=" w-full flex overflow-x-scroll py-2">
      {episodes.map((episode) => (
        <div
          key={episode}
          className="w-24 p-1 mr-4 last:mr-0"
        >
          Episode {episode}
        </div>
      ))}
    </ul>
  );
};

I added the border for troubleshooting purposes. I wanted the word Episode and the episode number on the same line, but for some reason they were separate. No matter what I did with the width of the divs they never changed. I knew it was something to do with flexbox because when I took it off the parent div the issue disappeared.

After over an hour of troubleshooting, I realized that you can set some properties on flex items to control their size. Not sure how this managed to become a gap in my knowledge, but there it was.

I played around with flex-basis hoping it would allow me to set the initial size and have them adhere to that. No change. flex-grow made no sense because the items seemed to be shrinking in width, not growing. Lo and behold, the flex-shrink property allows flex items to shrink as necessary! I tried setting flex to none; problem solved! With that fixed, the items adhered to the width that I specified, allowing the word episode and the corresponding number to sit on the same line like I wanted in the first place.

The best part: after all that, I decided on a different look for the episode selector anyway! Here’s to constantly finding more problems to solve to keep learning and eliminating knowledge gaps!