Flexbox Item Sizing: Flex Grow, Flex Shrink, and Flex Basis

Master CSS Flexbox item sizing. Learn the mathematical mechanics of flex-grow, flex-shrink, flex-basis, and standard flex shorthands.

Introduction

Setting up a flex container and aligning its items handles layout structure, but what happens when the container grows or shrinks? To build responsive dashboards, columns, or input fields that expand to fill empty space, you must configure how flex items resize dynamically.

This sizing behavior is controlled by three properties on the child elements: flex-grow, flex-shrink, and flex-basis. Understanding how these properties interact and calculate dimensions is a core frontend skill.

What You Will Learn

  • How elements grow to fill empty space using flex-grow.
  • How elements shrink to prevent container overflow using flex-shrink.
  • Defining base sizes using flex-basis instead of width.
  • The math behind size distributions.
  • Using the standard flex shorthand property.

Prerequisites

Detailed Explanation: The Three Sizing Properties

Let's explore the three properties that govern how flex items resize:

1. Flex Basis (flex-basis)

Defines the initial default size of a flex item before any growing or shrinking occurs.

  • Values: E.g., 200px, 10rem, 30%, or auto (default).
  • Difference from width: If flex-direction is row, flex-basis determines the width. If flex-direction is column, flex-basis determines the height.

2. Flex Grow (flex-grow)

Defines the ability of a flex item to grow and occupy remaining empty space along the Main Axis:

  • Values: Unitless numbers (e.g. 0 (default), 1, 2).
  • Mathematical Distribution: If Item A has flex-grow: 1 and Item B has flex-grow: 2, any remaining empty space in the container is divided into 3 units. Item A gets $\frac{1}{3}$ of the space, and Item B gets $\frac{2}{3}$.
.main-content {
  flex-grow: 2; /* Occupies double the extra space compared to sidebar */
}

.sidebar {
  flex-grow: 1;
}

3. Flex Shrink (flex-shrink)

Defines the ability of a flex item to shrink when the total size of all items is larger than the container:

  • Values: Unitless numbers (e.g. 1 (default), 0).
  • Prevent Shrinking: Set flex-shrink: 0 to prevent an item (like an icon or profile avatar) from compressing below its declared flex-basis size.

The Flex Shorthand

Instead of writing three separate lines to style item sizing, combine them into a single shorthand declaration:

$$\text{flex: flex-grow | flex-shrink | flex-basis};$$

.item {
  /* grow: 1, shrink: 0, basis: 200px */
  flex: 1 0 200px;
}

Standard Shorthand Presets:

  • flex: 0 1 auto; (Default) Does not grow, shrinks if needed, and uses its default width.
  • flex: 1 1 auto; (Shorthand: flex: auto;) Grows and shrinks dynamically as needed.
  • flex: 1 0 auto; Grows dynamically, but will not shrink below its content size.
  • flex: 1; (Shorthand: flex: 1 1 0px;) Forces all items to have equal widths, ignoring their content sizes.

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Sizing Calculations
    TotalSpace[Container width: 500px] --> ItemSpace[Items total basis: 300px]
    ItemSpace --> RemainingSpace[Remaining empty space: 200px]
    RemainingSpace -->|flex-grow: 1| GrowSpace[Remaining space distributed to items]
    end

Code Examples

Example 1: Classic Sidebar-Content Layout

Create a responsive sidebar-main content grid using flex sizing:

.app-container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.sidebar {
  /* Do not grow, do not shrink, fix basis width at 250px */
  flex: 0 0 250px; 
  background-color: #1e293b;
}

.content-body {
  /* Grow to fill all remaining width, shrink if needed */
  flex: 1 1 auto; 
  background-color: #ffffff;
  padding: 24px;
}

Example 2: Preventing Icon Compression inside Cards

Stop icons from shrinking when the text next to them is long:

.notification-card {
  display: flex;
  align-items: center;
  padding: 16px;
  width: 100%;
}

.notification-card__icon {
  /* Force size to stay exactly 40px, never compress */
  flex: 0 0 40px; 
  height: 40px;
  margin-right: 16px;
}

.notification-card__message {
  /* Grow dynamically to fill the card width */
  flex: 1; 
  font-size: 14px;
}

Best Practices & Common Mistakes

  • Incorrect Flex Basis values: Avoid declaring flex: 1 1 100%; on items in a row container, expecting them to behave like columns. Sizing under 100% basis will force immediate wrap-breaks or compress items. For multi-column rows, use percentages like 33.33% or 50% as the basis.
  • Ignoring Shorthands: Always prefer the shorthand flex property rather than writing individual declarations. The shorthand sets default values for the omitted properties correctly, which helps avoid styling bugs.

FAQs

Q: What is the difference between flex-basis: 0 and flex-basis: auto? A: flex-basis: 0 ignores the item's content width, distributing all space based on the flex-grow ratio. flex-basis: auto includes the item's content width in the calculations before distributing the remaining space.

Q: Can I use min-width alongside flex-basis? A: Yes! If you set flex-basis: 100% and flex-grow: 1 but define max-width: 500px, the browser will cap the item's growth at 500px.

Summary

CSS Flexbox item properties control sizing. While flex-basis sets initial default dimensions, flex-grow distributes empty space along the Main Axis, and flex-shrink compresses elements to prevent container overflow. These properties are best declared together using the flex shorthand.

Related Articles

Next Tutorial

Now that we have mastered one-dimensional layouts, let's explore two-dimensional page alignments. Let's check: Introduction to CSS Grid.

← Back to Syllabus