# 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:

![My vision for the episode selector component](https://cdn.hashnode.com/res/hashnode/image/upload/v1640630057920/fL0nc-49S.png)

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

```js
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>
  );
};
```

![Actual result for the episode selector component](https://cdn.hashnode.com/res/hashnode/image/upload/v1640630191581/-pZYGOC59.png)

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!