AAtomic CSS

flex-shrink

Determines how much a flex item shrinks when space is insufficient. fs0 prevents shrinking, while fs1 is the default that allows shrinking when needed.

fs + no unit = flex-shrink, fs + with unit = font-size

fs0 = flex-shrink: 0, fs1 = flex-shrink: 1, but fs16px = font-size: 16px. The property is determined by whether a unit is present!

Class List

ClassCSSDescription
fs0flex-shrink: 0Does not shrink. Fixed size
fs1flex-shrink: 1Default. Shrinks when space is insufficient
fshiflex-shrink: initialResets to initial value (1)
fshuflex-shrink: unsetUnsets value (reverts to inherited/default)

fs distinction: flex-shrink vs font-size

In Atomic CSS, the fs prefix represents completely different properties depending on whether a unit is present.

ClassPropertyCSS Output
fs0flex-shrinkflex-shrink: 0
fs1flex-shrinkflex-shrink: 1
fs14pxfont-sizefont-size: 14px
fs16pxfont-sizefont-size: 16px
fs1-4remfont-sizefont-size: 1.4rem
fs2remfont-sizefont-size: 2rem

Visual Comparison

Compares the difference based on flex-shrink values when container space is insufficient.

All fs1 (default) -- Shrink equally when space is insufficient

Wide Item 1Wide Item 2Wide Item 3

All three items shrink to fit the container

Item 1 with fs0 -- Does not shrink, maintains size

Fixed (fs0)ShrinksShrinks

The fs0 item maintains its original size, while the rest shrink more

Practical Pattern: Fixed Sidebar

Use fs0 w25rem to fix the sidebar so it never shrinks, while only the main content adjusts fluidly.

fs0 w25rem + fg1 combination

Sidebar (fs0 w25rem)
Main Content (fg1)
<!-- Fixed sidebar + Fluid Main -->
<div class="df gap16px">
  <aside class="fs0 w25rem bg18181B p2rem br8px">
    Sidebar (never shrinks)
  </aside>
  <main class="fg1 bg27272A p2rem br8px">
    Main Content (fills remaining space)
  </main>
</div>

<!-- Icon + Text (Icon Size Fixed) -->
<div class="df aic gap8px">
  <img class="fs0 w4rem h4rem br4px" src="avatar.png" />
  <span class="fg1">Icon never shrinks even with long text</span>
</div>

Class Details

fs0flex-shrink: 0

The item absolutely does not shrink. Used when the specified width or content size must be guaranteed. The most commonly used flex-shrink class.

<!-- Guarantee image/icon size -->
<div class="df aic gap12px">
  <img class="fs0 w4-8rem h4-8rem br8px" src="avatar.png" />
  <div class="fg1 minw0">
    <p class="fw600">User name</p>
    <p class="c71717A toe oh wsn">Avatar never distorts even with very long status message</p>
  </div>
</div>

<!-- Fixed Button -->
<div class="df gap8px">
  <input class="fg1 py8px px16px bg18181B b1pxsolid27272A br4px" placeholder="Enter..." />
  <button class="fs0 py8px px2rem bg6366F1 cFFFFFF br4px bn cp">Submit</button>
</div>

fs1flex-shrink: 1

Default value. Shrinks equally with other items when space is insufficient. Generally not needed explicitly, but used to revert fs0.

<!-- Default (usually omitted) -->
<div class="df gap8px">
  <span class="fs1 bg18181B p12px br4px">Can shrink</span>
  <span class="fs1 bg18181B p12px br4px">Can shrink</span>
</div>

<!-- Switch fs0 → fs1 in responsive -->
<aside class="fs0 sm-fs1 w25rem">
  Desktop: Fixed / Mobile: Can shrink
</aside>

fshiflex-shrink: initial

Resets flex-shrink to its initial value (1). Used to reset shrink values set by parent.

<!-- Revert with initial -->
<div class="df gap8px">
  <span class="fs0 md-fshi bg18181B p12px br4px">
    Desktop: Fixed / Tablet: initial (=1)
  </span>
</div>

fshuflex-shrink: unset

Completely unsets the flex-shrink value. Reverts to inherited or default value.

<!-- Unset to remove -->
<div class="df gap8px">
  <span class="fs0 md-fshu bg18181B p12px br4px">
    Desktop: Fixed / Tablet: unset
  </span>
</div>

Tips & Notes

Beware of fs0 vs fs16px confusion!

fs0, fs1 are flex-shrink, while fs16px, fs1-4rem are font-size. With a unit it is font-size, without a unit it is flex-shrink.

fs0 means "do not shrink"

Use fs0 on elements like images, icons, sidebars that must maintain their size. Without it, they may get squished when space is insufficient.

Most common pattern: fs0 + fixed width

fs0 w25rem means "fixed at 250px, does not shrink". An essential combination for sidebars, logos, avatars, etc.

min-width: 0 issue

The default min-width of flex items is auto. If long text causes overflow, add minw0 to allow shrink to work properly.

flex-growflex-basisflexmin-widthdisplay