How to prevent a flex item from shrinking with TailwindCSS

September 30, 2021

I had an issue where I had a flexbox (.flex with Tailwind) layout for two elements, but once the screen got narrower one element (in my case, an SVG) would get squished by the other element.

I wanted that one element to keep its original size and not get smaller when the other element squeezed it.

I was able to fix the problem by applying Tailwind's .flex-shrink-0 class to the element that was becoming smaller!

The markup looked a bit like this:

<div class="flex">
    <svg class="flex-shrink-0"></svg>
    <p>...</p>
</div>

A quick favor: was anything I wrote incorrect or misspelled, or do you still have questions? Please use this form to let me know or ask for help!

Loading...