shrink / shrink-0 — whether a child may compress. This family contains 2 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
shrink-0flex-shrink: 0;
shrinkflex-shrink: 1;

Example#

example
html
<div class="flex">
  <img class="shrink-0 h-12 w-12" src="a.jpg" alt="" />
  <p class="truncate">Long text…</p>
</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • shrink-0 protects avatars/icons from squashing in media rows

utilities/grid/grid-template-columns|Grid · comparisons/grid-vs-flexbox|Grid vs flexbox