Tailwind CSS 14 🎨 Flex Grow, Flex Shrink, Order, and Flex Basis Utilities - KandZ

Flexbox has a container level and an item level. The container properties — justify-*, items-*, gap-* — control how all children are arranged. The item properties — grow, shrink, basis, and order — control how each child behaves within that arrangement. These four properties determine whether an item expands to fill space, compresses when space runs out, defines its starting size, and where it appears in the visual sequence. Without them, every flex child has the same default behavior, and layouts that require unequal distribution or reordering cannot be expressed.

The flex-* shorthand combines all three of grow, shrink, and basis into a single utility: flex-1, flex-auto, flex-initial, and flex-none. These cover the common cases, and the individual utilities (grow-*, shrink-*, basis-*) handle the precise cases. In Tailwind v4, flex-grow-* and flex-shrink-* are aliased to the shorter grow-* and shrink-*, and basis-* sets flex-basis using the spacing scale, fractions, and keywords.

This chapter covers grow, shrink, basis, the flex-* shorthand, order, and the patterns that use them: sidebars that stay fixed while content expands, items that share space equally, cards that reorder at breakpoints, and layouts where one element absorbs all remaining space.

Key point: grow-* sets flex-grow, controlling how much an item expands. shrink-* sets flex-shrink, controlling how much it compresses. basis-* sets flex-basis, its initial main-axis size. flex-1 is shorthand for flex: 1 1 0% and is the most common. order-* changes the visual sequence without changing the DOM. In v4, flex-grow-* and flex-shrink-* are aliased to grow-* and shrink-*.

Why these item properties exist

The unequal distribution problem. justify-between and gap arrange items but do not change their sizes. When one item should be wider than another — a sidebar of 250px with content that fills the rest — the sizing must come from grow, shrink, and basis.

The overflow problem. By default, flex items shrink when space is tight. Sometimes this is wrong: an icon or a button should not shrink. shrink-0 prevents compression, which is the fix for the common problem of a button squeezing down when its sibling has long text.

The starting-size problem. Grow and shrink describe how an item responds to available space, but they do not define where it starts. basis-* sets the initial size before grow and shrink are applied, which matters when the distribution should be based on a specific starting point.

The reordering problem. On mobile, a call-to-action might come first; on desktop, it might come last. Changing the DOM order would break accessibility and tab order. order-* changes the visual order while leaving the DOM intact.

The truncation problem. Truncation in a flex child requires the child to be able to shrink below its content width. The default min-width: auto prevents this. min-w-0 removes that floor, and once the child can shrink, truncate works. Understanding the relationship between shrink, min-w-0, and truncate is essential.

a. Flex grow

The grow-* utilities set flex-grow, which determines how much of the available space an item absorbs relative to its siblings. The value is a unitless number, and available space is distributed in proportion to each item’s grow value.

Utility	CSS	Behavior
`grow`	`flex-grow: 1`	Absorb available space
`grow-0`	`flex-grow: 0`	Do not absorb space

<div class="flex gap-4">
  <div class="grow bg-blue-100 p-4">Grows</div>
  <div class="grow-0 bg-gray-100 p-4">Fixed</div>
</div>

With two children, one grow and one grow-0, the first absorbs all the remaining space and the second keeps its content size.

Numeric values allow proportional distribution. When two items have grow-1 and one has grow-2, the total grow value is 4, and the items receive 1/4, 1/4, and 2/4 of the available space respectively.

<div class="flex gap-4">
  <div class="grow-1">25%</div>
  <div class="grow-1">25%</div>
  <div class="grow-2">50%</div>
</div>

In v4, arbitrary numeric values are supported directly: grow-3, grow-7. The older flex-grow-* names are aliased and still work.

The grow utility without a value is the common case. It means “take an equal share of whatever is left.”

b. Flex shrink

The shrink-* utilities set flex-shrink, which determines how much an item compresses when the total content exceeds the container. The default in flexbox is shrink: 1, which means items shrink proportionally when space runs out. That default is often surprising, because it produces buttons and icons that squeeze down.

Utility	CSS	Behavior
`shrink`	`flex-shrink: 1`	Allow compression (default)
`shrink-0`	`flex-shrink: 0`	Prevent compression

<div class="flex gap-2">
  <span class="min-w-0 flex-1 truncate">A long filename that should truncate.txt</span>
  <button class="shrink-0 px-4 py-2 bg-blue-500 text-white rounded">Open</button>
</div>

Without shrink-0, the button compresses when the filename is long. With it, the button keeps its size and the text truncates. The combination of min-w-0 flex-1 truncate on the text and shrink-0 on the button is the standard pattern for a row with truncatable content and fixed actions.

The same applies to icons and avatars. An avatar that should stay 48px uses shrink-0:

<div class="flex items-center gap-3">
  <img class="size-12 shrink-0 rounded-full" src="avatar.jpg" alt="" />
  <div class="min-w-0">
    <p class="truncate font-medium">A very long display name</p>
    <p class="truncate text-sm text-gray-500">a-very-long-email@example.com</p>
  </div>
</div>

The avatar keeps its size, and the two lines of text truncate independently.

Numeric shrink values allow proportional compression. With two items, shrink-1 and shrink-2, the second compresses twice as much as the first when space is tight. This is used less often than shrink-0, but it is available when the compression should not be uniform.

c. Flex basis

The basis-* utilities set flex-basis, the initial main-axis size of an item before grow and shrink are applied. It is similar to width for a row and height for a column, but it participates in the flex distribution algorithm rather than being a fixed size.

The basis-* utility accepts the spacing scale, fractions, keywords, and arbitrary values.

Form	Example	CSS
Spacing	`basis-64`	`flex-basis: 16rem`
Fraction	`basis-1/3`	`flex-basis: 33.333%`
Full	`basis-full`	`flex-basis: 100%`
Auto	`basis-auto`	`flex-basis: auto`
Zero	`basis-0`	`flex-basis: 0`
Content	`basis-content`	`flex-basis: content`

<div class="flex gap-4">
  <aside class="basis-64 shrink-0">Sidebar at 16rem</aside>
  <main class="basis-0 grow">Content fills the rest</main>
</div>

Fractions are useful when children should start at a proportional size:

<div class="flex gap-4">
  <div class="basis-1/3">One third</div>
  <div class="basis-2/3">Two thirds</div>
</div>

The difference between basis-0 and basis-auto matters. With basis-auto, the initial size is the content’s natural size, and grow adds space on top. With basis-0, the initial size is zero, so grow distributes all the space equally, ignoring content. flex-1 uses basis: 0%, which is why equal-width columns work with flex-1 even when the content differs in length.

<!-- Equal widths regardless of content -->
<div class="flex">
  <div class="basis-0 grow">Short</div>
  <div class="basis-0 grow">A much longer piece of content</div>
</div>

d. The flex shorthand

The flex-* utilities combine grow, shrink, and basis into one declaration.

Utility	CSS	Effect
`flex-1`	`flex: 1 1 0%`	Grow and shrink equally from zero
`flex-auto`	`flex: 1 1 auto`	Grow and shrink from content size
`flex-initial`	`flex: 0 1 auto`	Shrink but do not grow (default)
`flex-none`	`flex: none`	Neither grow nor shrink (fixed)

flex-1 is the most common. It makes items share the available space equally, ignoring their content sizes. This is the utility for equal-width columns, flexible content areas, and anything that should fill the space.

<div class="flex">
  <div class="flex-1">Equal</div>
  <div class="flex-1">Equal</div>
  <div class="flex-1">Equal</div>
</div>

flex-none prevents both growing and shrinking, which is used for fixed-size elements that should keep their dimensions:

<div class="flex">
  <button class="flex-none">Fixed</button>
  <div class="flex-1">Fills the rest</div>
</div>

flex-auto grows and shrinks but bases the distribution on the content size, so a longer item starts larger and grows from there.

Situation	Utility
Equal share of space	`flex-1`
Fixed size	`flex-none`
Shrink but not grow	`flex-initial`
Grow from content	`flex-auto`

e. Order

The order-* utilities set the order property, which changes the visual sequence of flex items without changing the DOM order. This matters for accessibility: screen readers and keyboard navigation follow the DOM, so reordering with order-* does not disrupt them, but reordering by moving elements in the markup would.

Utility	CSS
`order-1`	`order: 1`
`order-2`	`order: 2`
`order-3`	`order: 3`
`order-first`	`order: -9999`
`order-last`	`order: 9999`
`order-none`	`order: 0`

<div class="flex flex-col md:flex-row">
  <main class="order-2 md:order-1">Content</main>
  <aside class="order-1 md:order-2">Sidebar</aside>
</div>

On mobile, the sidebar appears first; on desktop, it appears second. The DOM order is unchanged, so the reading order and tab order remain consistent.

The order-first and order-last utilities push an item to the beginning or end of the visual sequence regardless of its DOM position. They are useful for call-to-action elements that should appear last on desktop but first on mobile.

<div class="flex flex-col">
  <article>Main content</article>
  <aside class="order-first md:order-last">Call to action</aside>
</div>

f. Combining item properties

The most practical layouts combine grow, shrink, basis, and order. The standard sidebar layout uses shrink-0 for the sidebar and flex-1 for the content:

<div class="flex gap-6">
  <aside class="w-64 shrink-0">Sidebar</aside>
  <main class="flex-1 min-w-0">Content</main>
</div>

The min-w-0 on the content allows it to shrink below its content width, which enables truncation and prevents overflow when the content contains long unbreakable strings.

The standard card grid with equal heights uses flex-1 and items-stretch:

<div class="flex items-stretch gap-4">
  <div class="flex-1 flex flex-col">
    <h3>Card title</h3>
    <p class="flex-1">Body that expands</p>
    <button class="shrink-0">Action</button>
  </div>
</div>

The card is a flex column where the body grows and the button stays fixed at the bottom, so cards with different content lengths still align their buttons.

The responsive reorder pattern combines order-* with direction:

<div class="flex flex-col md:flex-row">
  <aside class="order-last md:order-first w-full md:w-64 shrink-0">
    Sidebar
  </aside>
  <main class="flex-1 min-w-0">Content</main>
</div>

The sidebar appears after the content on mobile and before it on desktop, without changing the DOM.

Complete Example Session

<!-- ============================================
PART 1: GROW — FILL AVAILABLE SPACE
============================================ -->
<div class="flex gap-4">
  <div class="grow bg-blue-100 p-4">Grows</div>
  <div class="grow-0 bg-gray-100 p-4">Fixed</div>
</div>

<!-- ============================================
PART 2: PROPORTIONAL GROW
============================================ -->
<div class="flex gap-4">
  <div class="grow bg-blue-100 p-4">25%</div>
  <div class="grow bg-blue-100 p-4">25%</div>
  <div class="grow-2 bg-blue-200 p-4">50%</div>
</div>

<!-- ============================================
PART 3: SHRINK-0 FOR FIXED ITEMS
============================================ -->
<div class="flex gap-2">
  <span class="min-w-0 flex-1 truncate">
    a-very-long-filename-that-should-truncate.txt
  </span>
  <button class="shrink-0 px-4 py-2 bg-blue-500 text-white rounded">
    Open
  </button>
</div>

<!-- ============================================
PART 4: AVATAR AND TRUNCATED TEXT
============================================ -->
<div class="flex items-center gap-3">
  <img class="size-12 shrink-0 rounded-full" src="avatar.jpg" alt="" />
  <div class="min-w-0">
    <p class="truncate font-medium">A very long display name</p>
    <p class="truncate text-sm text-gray-500">long-email@example.com</p>
  </div>
</div>

<!-- ============================================
PART 5: BASIS WITH SPACING
============================================ -->
<div class="flex gap-4">
  <aside class="basis-64 shrink-0">Sidebar at 16rem</aside>
  <main class="basis-0 grow">Content fills the rest</main>
</div>

<!-- ============================================
PART 6: BASIS WITH FRACTIONS
============================================ -->
<div class="flex gap-4">
  <div class="basis-1/3">One third</div>
  <div class="basis-2/3">Two thirds</div>
</div>

<!-- ============================================
PART 7: FLEX-1 EQUAL COLUMNS
============================================ -->
<div class="flex gap-4">
  <div class="flex-1">Equal</div>
  <div class="flex-1">Equal</div>
  <div class="flex-1">Equal</div>
</div>

<!-- ============================================
PART 8: FLEX-NONE FIXED SIZE
============================================ -->
<div class="flex gap-4">
  <div class="flex-none w-32">Fixed 8rem</div>
  <div class="flex-1">Fills remaining</div>
</div>

<!-- ============================================
PART 9: ORDER FOR RESPONSIVE REORDER
============================================ -->
<div class="flex flex-col md:flex-row gap-4">
  <main class="order-2 md:order-1">Content</main>
  <aside class="order-1 md:order-2 w-full md:w-64 shrink-0">Sidebar</aside>
</div>

<!-- ============================================
PART 10: COMPLETE SIDEBAR LAYOUT
============================================ -->
<div class="flex min-h-screen">
  <aside class="w-64 shrink-0 bg-gray-100 p-4">
    <nav>Navigation</nav>
  </aside>
  <div class="flex-1 min-w-0 flex flex-col">
    <header class="shrink-0 h-16 bg-white shadow-sm flex items-center px-4">
      Header
    </header>
    <main class="flex-1 p-6">
      Content area that scrolls
    </main>
    <footer class="shrink-0 h-12 bg-gray-50 flex items-center px-4">
      Footer
    </footer>
  </div>
</div>

These ten parts cover grow, proportional grow, shrink-0 for fixed items, avatar with truncated text, basis with spacing, basis with fractions, flex-1 equal columns, flex-none fixed size, order for responsive reorder, and a complete sidebar layout.

Quick Reference

Grow

Utility	CSS
`grow`	`flex-grow: 1`
`grow-0`	`flex-grow: 0`
`grow-2`	`flex-grow: 2`
`flex-grow-*`	v3 alias for `grow-*`

Shrink

Utility	CSS
`shrink`	`flex-shrink: 1` (default)
`shrink-0`	`flex-shrink: 0`
`shrink-2`	`flex-shrink: 2`
`flex-shrink-*`	v3 alias for `shrink-*`

Basis

Utility	CSS
`basis-64`	`flex-basis: 16rem`
`basis-1/3`	`flex-basis: 33.333%`
`basis-full`	`flex-basis: 100%`
`basis-auto`	`flex-basis: auto`
`basis-0`	`flex-basis: 0`
`basis-content`	`flex-basis: content`

Flex Shorthand

Utility	CSS	Effect
`flex-1`	`flex: 1 1 0%`	Equal share
`flex-auto`	`flex: 1 1 auto`	Grow from content
`flex-initial`	`flex: 0 1 auto`	Shrink, no grow
`flex-none`	`flex: none`	Fixed

Order

Utility	CSS
`order-1`	`order: 1`
`order-2`	`order: 2`
`order-first`	`order: -9999`
`order-last`	`order: 9999`
`order-none`	`order: 0`

Best Practices

✅ Do This:

<!-- Fixed sidebar, flexible content -->
<aside class="w-64 shrink-0">Sidebar</aside>
<main class="flex-1 min-w-0">Content</main>

<!-- Truncation with fixed action -->
<span class="min-w-0 flex-1 truncate">Long name</span>
<button class="shrink-0">Action</button>

<!-- Equal columns -->
<div class="flex-1">Equal</div>

<!-- Responsive reorder without moving DOM -->
<aside class="order-last md:order-first">Sidebar</aside>

❌ Don’t Do This:

<!-- Truncation without min-w-0 -->
<div class="flex-1 truncate">Won't truncate</div>  <!-- ❌ -->

<!-- Button shrinks when it should not -->
<button>Squeezed</button>  <!-- ❌ add shrink-0 -->

<!-- Reordering with DOM changes -->
<!-- Moving elements in JSX breaks accessibility -->  <!-- ❌ use order-* -->

<!-- flex-grow-* in v4 -->
<div class="flex-grow">  <!-- ❌ use grow -->

Common Pitfalls

Pitfall	Why It Happens	Fix
Truncation fails	Missing `min-w-0`	Add `min-w-0` to the flexible child
Button compresses	Default `shrink: 1`	Add `shrink-0`
Columns not equal	Used `basis-auto`	Use `flex-1` or `basis-0 grow`
Fixed item grows	`grow` applied by mistake	Use `grow-0` or `flex-none`
Order breaks tab navigation	DOM reordered instead of `order-*`	Keep DOM order, use `order-*`
Sidebar squashes	Missing `shrink-0`	Add `shrink-0` to sidebar

Real-World Examples

1. Sidebar Layout

<div class="flex">
  <aside class="w-64 shrink-0">Sidebar</aside>
  <main class="flex-1 min-w-0">Content</main>
</div>

2. Equal Columns

<div class="flex gap-4">
  <div class="flex-1">One</div>
  <div class="flex-1">Two</div>
  <div class="flex-1">Three</div>
</div>

3. Truncated Row with Action

<div class="flex gap-2">
  <span class="min-w-0 flex-1 truncate">Long text</span>
  <button class="shrink-0">Action</button>
</div>

4. Card with Bottom Button

<div class="flex flex-col h-64">
  <h3 class="shrink-0">Title</h3>
  <p class="flex-1 overflow-auto">Body</p>
  <button class="shrink-0">Action</button>
</div>

5. Responsive Reorder

<div class="flex flex-col md:flex-row">
  <main class="order-2 md:order-1 flex-1">Content</main>
  <aside class="order-1 md:order-2 w-full md:w-64 shrink-0">Sidebar</aside>
</div>

6. Proportional Grow

<div class="flex">
  <div class="grow-1">25%</div>
  <div class="grow-3">75%</div>
</div>

7. Fractional Basis

<div class="flex">
  <div class="basis-1/4 shrink-0">Quarter</div>
  <div class="basis-3/4">Three quarters</div>
</div>

8. Avatar with Truncated Name

<div class="flex items-center gap-3">
  <img class="size-10 shrink-0 rounded-full" src="a.jpg" alt="" />
  <div class="min-w-0">
    <p class="truncate">Name</p>
  </div>
</div>

9. Push Item to End

<div class="flex items-center">
  <span>Logo</span>
  <span class="ml-auto">Actions</span>
</div>

10. Fixed Header and Footer

<div class="flex flex-col h-screen">
  <header class="shrink-0 h-16">Header</header>
  <main class="flex-1 overflow-auto">Content</main>
  <footer class="shrink-0 h-12">Footer</footer>
</div>

Visual

Grow

┌──────────────────────────────────────────────────────────────┐
│  grow (1) and grow-0:                                        │
│  ┌────────────────────────────┐  ┌────────────┐              │
│  │  Absorbs all space         │  │   Fixed    │              │
│  └────────────────────────────┘  └────────────┘              │
│                                                              │
│  Proportional: grow-1, grow-1, grow-2                        │
│  ┌──────────┐  ┌──────────┐  ┌────────────────────┐          │
│  │  25%     │  │  25%     │  │       50%          │          │
│  └──────────┘  └──────────┘  └────────────────────┘          │
└──────────────────────────────────────────────────────────────┘

Shrink

┌──────────────────────────────────────────────────────────────┐
│  WITHOUT shrink-0:                                           │
│  ┌──────────────────────────┐  ┌──────┐                     │
│  │  Long text               │  │ But  │  ← button squeezed  │
│  └──────────────────────────┘  └──────┘                     │
│                                                              │
│  WITH shrink-0:                                              │
│  ┌───────────────────────┐  ┌────────────┐                  │
│  │  Long text truncated  │  │   Button   │  ← full size     │
│  └───────────────────────┘  └────────────┘                  │
│                                                              │
│  The button has shrink-0; the text has min-w-0 flex-1        │
│  truncate.                                                   │
└──────────────────────────────────────────────────────────────┘

Basis vs Width

┌──────────────────────────────────────────────────────────────┐
│  basis-1/3:                                                  │
│  ┌───────────────┬───────────────────────────────────────┐  │
│  │  33.33%       │  66.67% (grows to fill)               │  │
│  └───────────────┴───────────────────────────────────────┘  │
│                                                              │
│  basis-64 shrink-0:                                          │
│  ┌────────────────┐  ┌───────────────────────────────────┐  │
│  │  16rem fixed   │  │  Fills the rest                   │  │
│  └────────────────┘  └───────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────┘

Order

┌──────────────────────────────────────────────────────────────┐
│  MOBILE (flex-col):              DESKTOP (md:flex-row):      │
│  ┌────────────────────┐          ┌──────────┬────────────┐  │
│  │  ┌──────────────┐  │          │          │            │  │
│  │  │   Sidebar    │  │          │ Sidebar  │  Content   │  │
│  │  │  order-1     │  │          │ order-2  │  order-1   │  │
│  │  └──────────────┘  │          │          │            │  │
│  │  ┌──────────────┐  │          └──────────┴────────────┘  │
│  │  │   Content    │  │                                    │
│  │  │  order-2     │  │                                    │
│  │  └──────────────┘  │                                    │
│  └────────────────────┘                                      │
│                                                              │
│  <aside class="order-1 md:order-2">Sidebar</aside>           │
│  <main class="order-2 md:order-1">Content</main>             │
└──────────────────────────────────────────────────────────────┘

Flex Shorthand

┌──────────────────────────────────────────────────────────────┐
│  flex-1        flex: 1 1 0%      Equal share, ignore content │
│  flex-auto     flex: 1 1 auto    Grow from content size      │
│  flex-initial  flex: 0 1 auto    Shrink, do not grow         │
│  flex-none     flex: none        Fixed size                  │
└──────────────────────────────────────────────────────────────┘

Summary

Item	Value
`grow`	`flex-grow: 1` — absorb space
`grow-0`	`flex-grow: 0` — do not grow
`shrink`	`flex-shrink: 1` — allow compression
`shrink-0`	`flex-shrink: 0` — prevent compression
`basis-*`	`flex-basis` — initial main-axis size
`flex-1`	`flex: 1 1 0%` — equal share
`flex-auto`	`flex: 1 1 auto` — grow from content
`flex-none`	`flex: none` — fixed
`order-*`	Visual sequence without DOM change
v4 aliases	`grow-` and `shrink-` replace `flex-grow-` and `flex-shrink-`
Truncation	Requires `min-w-0` on flexible child
Fixed items	Require `shrink-0`

Key takeaways:

grow-* controls how an item absorbs available space. grow takes an equal share; grow-2 takes twice as much as grow-1. The default is grow-0, so items do not grow unless told to.
shrink-* controls how an item compresses. The default is shrink: 1, which means items compress when space runs out. shrink-0 prevents compression, which is essential for icons, avatars, and buttons that must keep their size.
basis-* sets the initial main-axis size. It is similar to width for rows and height for columns but participates in flex distribution. basis-1/3 starts at one third; basis-64 starts at 16rem; basis-0 starts at zero so grow distributes all space equally.
flex-1 is the most common shorthand. It combines grow: 1, shrink: 1, and basis: 0%, giving items an equal share of space regardless of content. flex-none prevents both growing and shrinking, keeping an item fixed.
order-* changes visual order without changing the DOM. This preserves accessibility and tab order. order-first and order-last push items to the extremes. Combine with responsive prefixes for layouts that reorder at breakpoints.
min-w-0 is required for truncation in a flex child. A flex child’s automatic minimum size is its content width. min-w-0 removes that floor so the child can shrink and truncate can work.
In v4, flex-grow-* and flex-shrink-* are aliased to grow-* and shrink-*. The shorter names are the v4 convention. The longer names still work but are deprecated.

Remember: The item properties — grow, shrink, basis, and order — are what make flexbox a distribution system rather than just an alignment system. Grow and shrink determine how items respond to available space; basis defines where they start; order changes where they appear visually. The flex-* shorthand combines the first three into a single utility, with flex-1 for equal distribution and flex-none for fixed elements. The two patterns that matter most in practice are shrink-0 for elements that must keep their size, and min-w-0 for elements that must be able to truncate. Together with grow and flex-1, these cover the vast majority of real-world flex layouts: sidebars that stay fixed while content expands, buttons that stay whole while text truncates, and columns that share space equally regardless of their content.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!