2 columns, one fixed, using Tailwind flexbox

I simply want to put two divs side by side. The one on the left should be 40px width. If the text does not overflow, there is no problem. But when it comes to overflow, it crushes the width on the left and compresses it as much as it can. What is the solution?

Code (from JSX):

<div className="flex">
     <div className="flex w-10 h-10 items-center justify-center">
          a
     </div>
     <div className="flex bg-red">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda atque, cumque illo ipsam itaque iure iusto nam officia reiciendis vero.
     </div>
</div>

>Solution :

Instead of setting w-10 on left div, you can use min-w-[40px].