flex-grow, flex-shrink, and flex-basis in CSS Flexbox

What You Learn From This Page

• How the three longhand properties cooperate in the Flexbox sizing algorithm.
• How flex-basis establishes an item's starting main size.
• How flex-grow distributes positive free space by growth factors.
• How flex-shrink removes negative free space using scaled shrink factors.
• Why equal growth factors do not always produce equal final item sizes.
• How automatic minimum sizes, overflow, and min/max constraints affect shrinking.
• What common flex shorthand values mean and when to use them.
• How to design and debug sidebars, search bars, toolbars, cards, and responsive layouts.

Introduction

Flexbox is designed to negotiate space. A flex item may begin with a preferred size, receive part of any extra room, or surrender part of its size when the line is too small. The properties flex-grow, flex-shrink, and flex-basis describe those three parts of the negotiation along the main axis.

flex-basis answers where the item should start. flex-grow answers whether and how strongly it should share positive free space. flex-shrink answers whether and how strongly it should participate when the starting sizes do not fit. Together, they form the core of flexible main-axis sizing.

The properties are related, but they are not interchangeable. A growth factor is not a percentage width. A shrink factor is not a direct number of pixels to remove. A basis is not always the final width or height. The browser resolves bases, margins, gaps, constraints, intrinsic minimums, and flexible factors as part of a multi-step algorithm. Learning that model makes common Flexbox results predictable.

Quick Comparison

The Main Axis Is the Sizing Direction

The three flex properties operate on the main axis. In a row, that axis usually corresponds to width in a horizontal writing mode. In a column, it usually corresponds to height. Writing modes and direction can change the physical mapping, so the more durable terms are main size and cross size.

.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

A basis of 12rem acts as a width-like starting size in the row and a height-like starting size in the column. This is why a declaration can appear to affect a different dimension after flex-direction changes.

A Practical Flex Sizing Pipeline

A simplified mental model begins by determining each item's flex base size. The browser adds the items' outer main sizes, gaps, and relevant margins and compares the result with the flex line's available inner main size. The comparison produces positive or negative free space.

starting sizes fit with room left
  -> positive free space
  -> flex-grow participates

starting sizes exceed the line
  -> negative free space
  -> flex-shrink participates

The real algorithm also freezes items as they hit min/max constraints, redistributes remaining space, applies rounding, and accounts for intrinsic sizes. The simplified sequence is still an effective debugging tool because it separates the starting point from the response to available space.

What flex-grow Controls

flex-grow is a non-negative number that describes an item's growth factor. A factor of zero means the item does not request positive free space through flexible growth. A positive factor allows it to receive a share relative to the positive factors of the other unfrozen items on the line.

.item {
  flex-grow: 1;
}

The initial value is zero, so flex items do not grow merely because their container has room. They begin from their resolved bases and leave remaining space unless another sizing or distribution rule uses it.

Growth Factors Are Ratios of Free Space

Suppose two items have growth factors of one and two. Their total growth factor is three. When 300 pixels of positive free space remains and no constraints interrupt the calculation, the first receives roughly one third, or 100 pixels, and the second receives roughly two thirds, or 200 pixels.

.primary   { flex-grow: 1; }
.secondary { flex-grow: 2; }

This does not mean the secondary item must be twice as wide. The growth ratio applies only to the free space added after the starting sizes have been determined. Different bases produce different final sizes even when the added portions follow a one-to-two ratio.

Equal Growth Does Not Guarantee Equal Width

Consider two items with bases of 100 and 300 pixels. If 200 pixels remains and both use flex-grow: 1, each receives about 100 pixels. Their final sizes become approximately 200 and 400 pixels. The additions are equal, but the final totals are not.

.item {
  flex-grow: 1;
  flex-basis: auto;
}

With an auto basis, content or the preferred main-size property can preserve those different starting points. When equal flexible columns are the goal, use an equal basis such as zero as well as equal growth factors.

A Growth Calculation

Assume an 800-pixel line contains two items with 200-pixel bases and no relevant margins or gaps. Their starting total is 400 pixels, leaving 400 pixels of positive free space. If their growth factors are one and three, the total factor is four.

Item A share = 400 * (1 / 4) = 100px
Item B share = 400 * (3 / 4) = 300px

Item A final = 200 + 100 = 300px
Item B final = 200 + 300 = 500px

Minimum and maximum sizes can freeze an item before it receives that full share. The browser then redistributes unresolved space among the remaining flexible items, which is why real results may differ from one-pass arithmetic.

Growth Factors Below One

Growth factors are numbers and can be fractional. When the sum of the flex-grow factors on a line is below one, the items may request only a fraction of the free space, leaving some space unused. This behavior is easy to miss when treating factors as simple proportions that must always consume everything.

.one { flex-grow: 0.25; }
.two { flex-grow: 0.25; }

Most application layouts use zero or factors whose total is at least one. Fractional totals can be intentional, but they should be used with an understanding of the remaining-space behavior rather than as approximate percentages.

What flex-shrink Controls

flex-shrink is a non-negative number that describes participation when the items' starting sizes exceed the available main size. Its initial value is one, so flex items are normally allowed to shrink. A value of zero removes that item from flexible shrinking, subject to the rest of the sizing rules.

.item {
  flex-shrink: 1;
}

.fixed-icon {
  flex-shrink: 0;
}

Preventing an icon or compact button from being compressed can be appropriate. Disabling shrink across an entire interface usually creates overflow because every item insists on keeping its full starting size.

Shrink Uses Scaled Factors

Shrink distribution is not the same simple factor ratio used for growth. The browser scales each shrink factor by the item's flex base size. Conceptually, the item's shrink weight is its flex-shrink value multiplied by its base. Larger items therefore tend to surrender more pixels when factors are equal.

scaled shrink factor = flex-shrink * flex base size

This protects small items from losing the same absolute number of pixels as much larger items. If a 100-pixel item and a 400-pixel item both use a shrink factor of one, the larger item's scaled factor is four times greater.

An Equal-Base Shrink Calculation

Suppose a 500-pixel line contains two items with 300-pixel bases. Their total is 600 pixels, so 100 pixels must be removed. Both have a shrink factor of one, and their bases are equal, so their scaled factors are equal.

negative free space = 500 - 600 = -100px

Item A reduction = 50px
Item B reduction = 50px

Final sizes = 250px and 250px

This simplified result assumes no minimum size blocks the reduction. If one item reaches a minimum at 280 pixels, it freezes there and the other item must absorb more of the unresolved deficit.

A Different-Base Shrink Calculation

Now assume bases of 200 and 400 pixels in the same 500-pixel line. Again, 100 pixels must be removed and both shrink factors are one. The scaled factors are 200 and 400, for a total of 600.

Item A reduction = 100 * (200 / 600) = 33.33px
Item B reduction = 100 * (400 / 600) = 66.67px

Approximate final sizes:
166.67px and 333.33px

The larger item loses more pixels but both lose approximately the same proportion of their bases. Rounding and constraints can adjust the final used values.

Use flex-shrink: 0 Deliberately

A no-shrink item says that preserving its main size is more important than sharing layout pressure. This is useful for avatars, logos, icon controls, or a sidebar whose width is an explicit design requirement.

.avatar {
  inline-size: 3rem;
  flex-shrink: 0;
}

Every protected item transfers more pressure to its siblings or the container. Test long labels, localization, zoom, and narrow screens. A supposedly fixed sidebar may need to collapse or stack rather than force the main content below a usable width.

What flex-basis Controls

flex-basis defines the initial main-size basis used before free space is distributed. It accepts many of the same kinds of values as width, including lengths, percentages, intrinsic sizing keywords where supported, zero, auto, and content.

.sidebar {
  flex-basis: 18rem;
}

A basis is a starting input, not a guarantee. Growth can make the item larger, shrinkage can make it smaller, and min/max constraints can clamp the result. The final main size belongs to the entire flex sizing process.

flex-basis: auto

The initial basis is auto. In practical terms, auto consults the item's preferred main-size property when that value is definite. In a row, a declared width can provide the basis; in a column, a declared height can provide it. When the preferred size is itself auto, content-based sizing contributes.

.item {
  width: 16rem;
  flex-basis: auto;
}

In a row, the 16rem width influences the flex base. The item can still grow or shrink according to its factors. This is why width is not necessarily the final rendered width inside a flex line.

An Explicit Basis vs width

When an item has an explicit non-auto flex-basis, that basis normally supplies the main-size starting point instead of the corresponding width or height for flex sizing.

.item {
  width: 20rem;
  flex-basis: 12rem;
}

In a row, Flexbox starts its flexible sizing from the 12rem basis. The width can still matter in related sizing and fallback situations, but authors should avoid mixing conflicting intentions. Choose a clear basis strategy and use min/max constraints for genuine boundaries.

flex-basis: 0

A zero basis tells the flexible sizing process to start each item from zero rather than from content-sized or width-derived differences. Equal growth factors then divide the available flexible space from a common starting point, which is why zero is common in equal flexible columns.

.column {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

Zero basis does not erase minimum-content constraints. An item may still refuse to become as narrow as expected because its automatic minimum main size protects long content. Equal mathematical shares therefore require suitable minimum sizing as well as equal flex factors.

Zero and Zero Percent Are Not Always Identical

The computed expansion of common shorthand forms often uses a zero-percent basis. A percentage basis depends on whether the flex container has a definite main size; in an indefinite size, percentage resolution can behave differently from an absolute zero length and may fall back toward content behavior.

In ordinary definite-width rows, developers rarely notice a difference. In nested, intrinsic, or column layouts with indefinite main sizes, it can matter. When exact behavior is important, write the intended three-value shorthand explicitly and test the actual containing context.

flex-basis: content and Intrinsic Keywords

flex-basis: content bases the starting size on the item's content. Intrinsic sizing keywords such as max-content, min-content, and fit-content can also express content-driven intentions in supported contexts.

.label {
  flex: 0 1 content;
}

Content-driven sizing is useful when labels should begin from their natural requirements, but long unbroken values can create overflow. Use overflow wrapping, minimum constraints, and realistic data tests rather than assuming content is always short.

Percentage and Length Bases

A length such as 18rem creates a clear starting size independent of the container's percentage calculation. A percentage basis is resolved against the flex container's inner main size when that size is definite.

.sidebar { flex-basis: 18rem; }
.card    { flex-basis: 33.333%; }

Percentage cards plus gaps can exceed the line because three 33.333 percent bases already consume nearly all available width before the gaps are added. Grid's fractional tracks often express strict multi-column layouts more directly.

Minimum and Maximum Constraints

Flex factors do not override min/max sizing. A growing item stops at its maximum main size. A shrinking item stops at its minimum main size. When an item becomes clamped, Flexbox freezes it and continues resolving remaining free space among eligible siblings.

.panel {
  flex: 1 1 16rem;
  min-inline-size: 12rem;
  max-inline-size: 30rem;
}

This panel prefers 16rem, may grow or shrink, but stays within the specified logical boundaries in a row. Any leftover space after it reaches 30rem may go to other growing items or remain for content distribution.

The Automatic Minimum Size

Flex items commonly have an automatic minimum main size derived from their content. A long URL, code token, table, image, or nested no-wrap region can prevent an item from shrinking even though flex-shrink: 1 is active.

.main-content {
  flex: 1 1 0;
  min-inline-size: 0;
}

In a horizontal row, min-inline-size: 0 is the logical equivalent commonly used instead of min-width: 0. It permits the item to shrink below its automatic content-based minimum. The content still needs an appropriate wrapping, scrolling, or truncation strategy.

Truncation and min-width: 0

Ellipsis often fails inside a flex row because the flexible text item refuses to become narrower than its content. Allowing the item to shrink is a prerequisite for overflow to occur within that item.

.result-row {
  display: flex;
  align-items: center;
}

.result-title {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Truncation hides information, so preserve access to the full value through surrounding context, a detail view, or another accessible interaction. Do not use a title attribute as the only solution for keyboard and touch users.

The flex Shorthand

The preferred authoring form is often the flex shorthand because it sets grow, shrink, and basis as a coordinated value. The full three-part syntax is flex: <grow> <shrink> <basis>.

.item {
  flex: 1 1 12rem;
}

This item may grow, may shrink, and begins from a 12rem basis. Using the shorthand prevents an old longhand value from surviving unexpectedly in the cascade when only one component of the sizing model is changed.

What flex: 1 Means

flex: 1 is a common single-number shorthand. In browser behavior it expands to a positive grow factor, a shrink factor of one, and a zero-like percentage basis. It is not equivalent to changing only flex-grow.

.equal-item {
  flex: 1;
}

Because the basis is reset, multiple items using flex: 1 are more likely to share the line equally than items with only flex-grow set to one and different auto bases. Intrinsic minimums can still prevent exact equality.

Common Shorthand Patterns

flex: auto, initial, and none

Keyword shorthand values communicate common sizing modes. flex: auto corresponds to a grow-and-shrink item with an auto basis. flex: initial represents the initial longhands: no growth, shrinking allowed, auto basis. flex: none disables both growth and shrinkage while retaining the auto basis.

.fluid   { flex: auto; }
.default { flex: initial; }
.fixed   { flex: none; }

Choose the mode that describes the relationship. Avoid using none merely because a component looked compressed in one screenshot; first determine whether its sibling, minimum size, or responsive structure is the real problem.

Real-World Sidebar and Main Layout

A classic layout keeps a sidebar at a preferred size while the main region consumes the remaining width. A fixed sidebar can be appropriate on wide screens, but the layout should change before the content area becomes unusably narrow.

.layout {
  display: flex;
  gap: 1.5rem;
}

.sidebar {
  flex: 0 0 18rem;
}

.main {
  flex: 1 1 0;
  min-width: 0;
}

The main area grows and shrinks; min-width zero permits its contents to negotiate available width. At a suitable breakpoint or container size, stack the regions or provide an intentional sidebar disclosure instead of preserving 18rem at all costs.

Real-World Search Bar

A search input can absorb remaining width while its submit button stays content-sized. The button should remain usable, and the input should be allowed to shrink without forcing horizontal overflow.

.search-form {
  display: flex;
  gap: 0.5rem;
}

.search-form input {
  flex: 1 1 10rem;
  min-width: 0;
}

.search-form button {
  flex: 0 0 auto;
}

The input prefers 10rem, grows into available room, and can shrink. On very narrow containers, wrapping or stacking may provide a better target size than compressing both controls indefinitely.

Real-World Toolbar

A toolbar may contain a flexible search region and a stable action group. Assign flexibility to the region that can meaningfully expand while allowing the action group to preserve its natural size.

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toolbar-search {
  flex: 1 1 12rem;
  min-width: 0;
}

.toolbar-actions {
  flex: 0 0 auto;
}

If the action labels grow through translation or larger text, the toolbar may still overflow. Add wrapping or switch to a stacked structure based on the component's available space.

Real-World Flexible Cards

Cards can use a preferred basis and remain able to grow, shrink, and wrap. This produces flexible rows without assuming exactly three items at every width.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 16rem;
}

Cards begin around 16rem, expand to share a line, and wrap when the line becomes constrained. If all rows need consistent shared columns, CSS Grid with repeat(), minmax(), and fractional tracks is often more appropriate.

Real-World Media Object

A media object pairs a stable image with flexible text. The image should not be compressed, while the text region needs permission to shrink below its automatic minimum.

.media {
  display: flex;
  gap: 1rem;
}

.media-image {
  flex: 0 0 4rem;
}

.media-content {
  flex: 1 1 0;
  min-width: 0;
}

Give the image suitable dimensions and object-fit behavior. Let body text wrap naturally, and handle long identifiers or URLs with an intentional overflow-wrap policy.

Gaps and Basis Calculations

Gaps consume space between items and are not part of each item's flex-basis. Three items with a 33.333 percent basis already claim nearly 100 percent of the line; two additional gaps can create negative free space and force shrinking or wrapping.

.three-up {
  display: flex;
  gap: 1rem;
}

.three-up > * {
  flex: 0 1 33.333%;
}

For strict equal columns with fixed gutters, Grid is clearer. For flexible card widths, use a meaningful length basis such as 16rem and allow growth and wrapping.

Content, Images, and Replaced Elements

Intrinsic dimensions matter when a basis is auto or when automatic minimum sizing is active. Images, videos, long code tokens, and tables can establish large minimum contributions that resist shrinking. A growth or shrink declaration does not by itself make every descendant responsive.

Constrain media with responsive maximum sizes, allow text to wrap where appropriate, and put genuinely wide tables or code in controlled scrolling regions. Fix the content constraint rather than compensating with extreme flex factors.

Rounding and Pixel Distribution

Flexible calculations often produce fractional pixels. Browsers preserve subpixel layout internally and distribute rendered pixel rounding so the line fits as consistently as possible. As a result, nominally equal items can differ by a visible pixel at certain container widths.

This is normal and should not be corrected with brittle nth-child widths. If exact track alignment across rows is important, use Grid. Flexbox optimizes a one-dimensional line and can resolve each wrapped line independently.

Common Mistake: Treating flex-grow as a Width

A factor of two does not mean 200 percent or twice the final width. It means the item requests twice the share of positive free space requested by a factor-one sibling. Bases, constraints, gaps, and content still contribute to final size.

When reviewing code, describe grow values as ratios of the remainder. This vocabulary prevents incorrect expectations and makes calculations easier to explain.

Common Mistake: Forgetting Default Shrinkage

An item with width: 20rem can render narrower because flex-shrink initially equals one. Width contributes to its preferred or base size; it does not guarantee the final used width under negative free space.

.sidebar {
  width: 20rem;
  flex-shrink: 0;
}

Disable shrinking only if preserving 20rem is truly required and the surrounding layout has a responsive alternative. Otherwise, express a flexible minimum and preferred basis.

Common Mistake: Disabling Shrink Globally

A universal flex-shrink: 0 rule prevents Flexbox from resolving many constrained layouts. It often creates horizontal scrolling, clipped controls, or content that disappears beyond the viewport.

Protect only the items whose size carries meaning, such as an avatar or compact icon. Let text and main content negotiate space, then define wrapping and minimums appropriate to that content.

Common Mistake: Conflicting width and flex-basis

Declaring a 20rem width and a 10rem basis without understanding precedence creates an unclear sizing contract. Future maintainers may adjust width and see little effect because the explicit basis remains the algorithm's starting point.

Use flex-basis for the intended flex starting size, then use min/max main sizes to define boundaries. Keep width or height only when it serves a separate, intentional role.

Common Mistake: flex: 1 Without Minimum Control

Flex: 1 creates a useful flexible item, but it does not automatically neutralize the item's intrinsic minimum. Long unbroken content can still force the item wider than its equal share.

.flexible-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

Choose wrapping, scrolling, or truncation according to the content. Minimum zero enables the shrink; it does not decide how overflowing descendants should be presented.

Common Mistake: Forgetting Column Direction

In a column, the main axis commonly runs vertically. Flex-basis therefore supplies a height-like starting size, grow distributes extra vertical room, and shrink resolves a vertical deficit. A percentage basis may also require a definite container height to resolve as expected.

Inspect flex-direction and the definiteness of the main size before assuming a basis controls width. Use logical main-axis language while reasoning, then translate to physical dimensions for the current writing mode.

Responsive and Accessibility Considerations

Flexible sizing should preserve readable content and operable controls, not merely avoid an obvious scrollbar. Test at high zoom, with enlarged text, long translations, keyboard focus indicators, and dynamic validation messages. A shrinking button must retain an adequate target and a readable label.

Allow regions to wrap or stack before they become unusable. Avoid fixed sidebars that consume most of a narrow viewport. If text is truncated, provide a reliable path to the full information. If a region scrolls, keep the scrolling boundary visible and keyboard accessible.

A Systematic Debugging Workflow

Start by identifying the flex container, flex direction, and line. Inspect the available inner main size, gap, margins, and each item's computed basis. Determine whether the line has positive or negative free space.

For positive space, inspect grow factors and max sizes. For negative space, inspect scaled shrink factors, minimum sizes, and intrinsic content. Check whether items have frozen at constraints, whether auto margins absorb positive space, and whether wrapping moved an item to another line. Browser Flexbox overlays and computed-style panels expose these facts more reliably than changing values at random.

1. Identify the main axis and flex line
2. Inspect bases, margins, and gaps
3. Determine positive or negative free space
4. Check grow or scaled shrink factors
5. Inspect min/max and intrinsic constraints
6. Check wrapping, auto margins, and frozen items
7. Verify the final used sizes in DevTools

Complete Layout Example

The following layout keeps a sidebar at 18rem and lets the main region use the rest. The main region may shrink below its content-based automatic minimum, while nested content receives an intentional overflow strategy.

<div class="app-layout">
  <aside class="app-sidebar">Navigation</aside>
  <main class="app-main">Main content</main>
</div>

.app-layout {
  display: flex;
  gap: 1.5rem;
}

.app-sidebar {
  flex: 0 0 18rem;
}

.app-main {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 48rem) {
  .app-layout {
    flex-direction: column;
  }

  .app-sidebar,
  .app-main {
    flex-basis: auto;
  }
}

The wide layout expresses a fixed sidebar and flexible main area. The narrow layout changes the structure rather than compressing two columns beyond usefulness.

Common Interview Questions

What does flex-grow do? It controls how an unfrozen flex item shares positive free space relative to the growth factors of other items on its line.

What is the initial flex-grow value? Zero, so items do not grow by default.

What does flex-shrink do? It controls participation in removing negative free space, using a factor scaled by the item's flex base size.

What is the initial flex-shrink value? One, so items are allowed to shrink by default.

What does flex-basis do? It provides the initial main-axis basis used before flexible growth or shrinkage.

Does flex-grow: 1 guarantee equal widths? No. Different bases, minimums, and maximums can produce different final sizes.

How are equal flexible items commonly created? Use equal grow factors and a common zero-like basis, often through flex: 1, while handling intrinsic minimums.

Why can an item refuse to shrink? Its automatic minimum size, explicit minimum, unbreakable content, fixed descendant, or zero shrink factor may block reduction.

Why is min-width: 0 often needed? It allows a row flex item to shrink below its automatic content-based minimum so wrapping, scrolling, or ellipsis can work.

What does flex: 0 0 18rem mean? Do not grow, do not shrink, and use an 18rem basis.

Practical Review Checklist

• Identify the main axis before interpreting the flex properties.
• Treat flex-basis as a starting size, not a guaranteed final size.
• Remember that grow factors divide positive free space, not total width.
• Remember that shrink factors are scaled by flex base sizes.
• Use a common zero basis when equal flexible shares are intended.
• Use an auto basis when preferred size or content should influence the start.
• Protect fixed icons and avatars selectively rather than disabling shrink globally.
• Check automatic minimum sizes when a flexible item overflows.
• Apply min-width zero only with an intentional content-overflow strategy.
• Account for gaps when choosing percentage bases.
• Use min/max constraints to express real sizing boundaries.
• Prefer the flex shorthand when setting a coordinated sizing mode.
• Use Grid when rows need shared, strict column tracks.
• Test narrow widths, zoom, localization, large text, and dynamic content.

Key Takeaway

Flexbox sizing is a negotiation built from three inputs. flex-basis establishes the starting main size. flex-grow distributes positive free space according to relative growth factors. flex-shrink removes negative free space using factors scaled by the items' bases. The final result is then constrained by minimums, maximums, intrinsic content, margins, gaps, and line formation.

Use flex: 1 for common equal flexible regions, flex: 1 1 auto when content or a preferred size should influence the start, and flex: 0 0 <size> only for genuinely fixed items. When a flexible text region overflows, inspect its automatic minimum and consider min-width: 0. With these relationships understood, sidebars, search controls, toolbars, card rows, and responsive content areas become calculations you can explain rather than layouts you tune by accident.