Codestin Search App

CSS flex-shrink Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The flex-shrink property determines how a flex item reduces its size when the flex container has less space than the sum of its items’ base sizes. It applies along the container’s main axis and only becomes relevant when available space is negative (i.e., the items would otherwise overflow). In that situation, the property acts as a relative guide that tells the layout system how much each item should give up of its base space compared with its siblings.

Rather than forcing an absolute size change, flex-shrink works as a proportional factor: items with a larger factor yield more of their base size than items with a smaller factor. That behavior must be read together with each item’s initial size — commonly established by flex-basis or the item’s intrinsic content size — because the amount available to shrink is calculated from those starting sizes. It also interacts with the item’s ability to grow; for coordinated sizing when space is abundant, the related flex-grow factor controls expansion, while flex-shrink controls contraction.

Practical layout results can also be influenced by shorthand usage and constraints. The flex shorthand can set shrink behavior together with growth and base size, so using the shorthand may override a separately declared shrink behavior. Additionally, minimum size constraints such as min-width and min-height can prevent an item from shrinking beyond a certain point, causing remaining negative space to be resolved by other items or by overflow. Understanding flex-shrink in the context of base sizes and such constraints is key to predicting how a flex layout will adapt when the container becomes smaller.

Definition

Initial value: 1
Applies to: Flex items, including in-flow pseudo-elements
Inherited: No
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.flexShrink

Interactive Demo

flex-shrink: 0;

flex-shrink: 1;

flex-shrink: 2;

Flex Shrink

Item 2

Item 3

Syntax

flex-shrink: <number>

Values

<number>Integers (1, 2, 3, ...) or fractional numbers (for example: 0.6) are accepted. Negative values are ignored.

Example

HTML

<div class="wrap">

    <h2>flex-shrink example</h2>

    <div class="container">

        <div class="item shrink-1">Item A  -  flex-shrink: 1 (default)</div>

        <div class="item shrink-2">Item B  -  flex-shrink: 2 (shrinks more)</div>

        <div class="item no-shrink">Item C  -  flex-shrink: 0 (doesn't shrink)</div>

    </div>

</div>

CSS

/* Layout and basic styles */
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin: 20px; background: #f7f9fc; color: #0f1724; }
.wrap { max-width: 900px; margin: 0 auto; }
h2 { margin: 0 0 12px 0; font-size: 18px; color: #0b3d91; }

/* Flex container */
.container {
    display: flex;
    gap: 12px;
    width: 600px;            /* constrained width so items must shrink */
    padding: 12px;
    border: 1px solid #d0d7e6;
    background: #ffffff;
}

/* Flex items  -  set a large basis so shrinking is required */
.item {
    flex-basis: 250px;       /* initial size before shrinking */
    flex-grow: 0;            /* prevent growing */
    flex-shrink: 1;         /* default shrink factor */
    padding: 14px;
    border-radius: 6px;
    border: 1px solid rgba(11,61,145,0.12);
    background: linear-gradient(180deg, #ffffff, #f4f7ff);
    color: #07204a;
    font-weight: 600;
    text-align: center;
    min-width: 0;            /* allow content to shrink inside the flex item */
}

/* Different shrink behaviors */
.shrink-2 { flex-shrink: 2; /* shrinks twice as much as the default items */ }
.no-shrink { flex-shrink: 0; /* will not shrink; forces the other items to absorb the reduction */ }

/* Small responsive hint so the demo still looks OK on narrow screens */
@media (max-width: 640px) {
    .container { width: 100%; }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS flex-shrink property. Hover over a browser icon to see the version that first introduced support for this CSS property.