Flex Grow / Shrink

Below, utility classes to apply flex-grow and flex-shrink properties.

Flex Grow

Class	Properties
.flex-grow	flex-grow: 1;
.flex-nogrow	flex-grow: 0;

Example(s)

<div class="flex-row ...">
  <div class="w-24 h-12 ..."></div>
  <div class="min-w-24 h-12 flex-grow ..."></div>
  <div class="w-24 h-12 ..."></div>
</div>

<div class="flex-row ...">
  <div class="w-24 h-12 ..."></div>
  <div class="min-h-12 flex-nogrow ..."></div>
  <div class="w-24 h-12 ..."></div>
</div>

Flex Shrink

Class	Properties
.flex-shrink	flex-shrink: 1;
.flex-noshrink	flex-shrink: 0;

Example(s)

<div class="flex-row ...">
  <div class="w-1/1 h-12 ..."></div>
  <div class="w-24 h-12 flex-shrink ..."></div>
  <div class="w-1/1 h-12 ..."></div>
</div>

<div class="flex-row ...">
  <div class="w-1/1 h-12 ..."></div>
  <div class="w-24 h-12 flex-noshrink ..."></div>
  <div class="w-1/1 h-12 ..."></div>
</div>