How to prevent a flex item from shrinking with Tailwind CSS
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>
Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects I’m working on.