> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Flex Shrink

> Use the bundled `.flex-shrink` utility when selected items should contract in limited space.

export const FlexShrinkDemo = () => {
  const blockStyle = bg => ({
    background: bg,
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  });
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.flex-shrink</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    gap: "1rem",
    overflow: "hidden"
  }}>
            <div style={{
    ...blockStyle("#2563eb"),
    width: "16rem",
    flexShrink: 1
  }}>Shrinks first</div>
            <div style={{
    ...blockStyle("#0f766e"),
    width: "12rem",
    flexShrink: 0
  }}>Stays wider</div>
            <div style={{
    ...blockStyle("#7c3aed"),
    width: "10rem",
    flexShrink: 0
  }}>Fixed</div>
          </div>
        </div>
      </div>
    </div>;
};

export const FlexShrinkRailDemo = () => {
  const blockStyle = bg => ({
    background: bg,
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  });
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">rail with flex-shrink</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    gap: "1rem",
    overflow: "hidden"
  }}>
            <div style={{
    ...blockStyle("#db2777"),
    width: "14rem",
    flexShrink: 1
  }}>Card A</div>
            <div style={{
    ...blockStyle("#0891b2"),
    width: "14rem",
    flexShrink: 1
  }}>Card B</div>
            <div style={{
    ...blockStyle("#334155"),
    width: "14rem",
    flexShrink: 1
  }}>Card C</div>
          </div>
        </div>
      </div>
    </div>;
};

## Overview

`.flex-shrink` controls whether an item compresses when there isn't enough space in the container. Use it to designate which items should give up width first.

| Class          | CSS               |
| -------------- | ----------------- |
| `.flex-shrink` | `flex-shrink: 1;` |

## Selective Shrink

Apply `.flex-shrink` to the item that should compress first while its siblings stay at their intended widths. Items without `flex-shrink` will resist compression.

<FlexShrinkDemo />

```html theme={null}
<div class="elementor-element flex gap-4 overflow-hidden">
  <div class="flex-shrink card padding-4" style="width: 20rem;">
    Primary card
  </div>
  <div class="card padding-4" style="width: 12rem;">
    Pinned card
  </div>
</div>
```

## Rail with Shared Shrink

When all items in a rail share `.flex-shrink`, they compress equally. This keeps the layout balanced when the container is narrow.

<FlexShrinkRailDemo />

```html theme={null}
<div class="elementor-element flex gap-4 overflow-hidden">
  <div class="flex-shrink card padding-4" style="width: 14rem;">
    Card A
  </div>
  <div class="flex-shrink card padding-4" style="width: 14rem;">
    Card B
  </div>
  <div class="flex-shrink card padding-4" style="width: 14rem;">
    Card C
  </div>
</div>
```

## Best Practices

* Use `.flex-shrink` when an item may safely compress before the container overflows.
* Keep critical controls or labels on non-shrinking siblings when width must stay stable.
* Combine with `.overflow-auto` on rails when compression alone is not enough.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Flex Basis" href="/flexbox/flex-basis">
    Initial size before shrink factors apply
  </Card>

  <Card title="Flex Grow" href="/flexbox/flex-grow">
    Let items expand when extra space exists
  </Card>
</CardGroup>