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

# Min Width

> Control minimum width with size, fraction, and keyword min-width utilities.

export const MinWidthScreenDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">minimum-width-screen</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-viewport">
            <div className="sk-demo-min-w-screen sk-size-keyword-bar">
              minimum-width-screen
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const MinWidthFullDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">minimum-width-full</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-parent">
            <div className="sk-size-keyword-bar" style={{
    minWidth: "100%"
  }}>minimum-width-full</div>
          </div>
        </div>
      </div>
    </div>;
};

export const MinWidthAutoDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">minimum-width-auto</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-parent">
            <div className="sk-size-keyword-bar sk-size-keyword-bar--inline" style={{
    minWidth: "auto"
  }}>
              minimum-width-auto
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const MinWidthFractionalDemo = () => {
  const tile = {
    flex: "1 1 45%",
    minWidth: "50%",
    borderRadius: "0.5rem",
    padding: "0.65rem",
    fontSize: "0.75rem",
    fontWeight: 700,
    color: "#ffffff",
    textAlign: "center",
    boxShadow: "0 4px 12px rgba(15, 23, 42, 0.15)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.minimum-width-1-2 on flex children (wrap)</span>
        <div className="tw-demo-card" style={{
    padding: "0.5rem"
  }}>
          <div style={{
    display: "flex",
    flexWrap: "wrap",
    gap: "0.5rem",
    width: "100%"
  }}>
            <div style={{
    ...tile,
    background: "#2563eb"
  }}>minimum-width-1-2</div>
            <div style={{
    ...tile,
    background: "#0d9488"
  }}>minimum-width-1-2</div>
          </div>
        </div>
      </div>
    </div>;
};

export const MinWidthDemo = () => {
  const items = [{
    cls: "minimum-width-3xs",
    desc: "Small card floor",
    val: "16rem",
    meta: "16rem / 256px"
  }, {
    cls: "minimum-width-md",
    desc: "Readable panel floor",
    val: "28rem",
    meta: "28rem / 448px"
  }, {
    cls: "minimum-width-2xl",
    desc: "Wide content floor",
    val: "42rem",
    meta: "42rem / 672px"
  }];
  const blockStyle = {
    borderRadius: "0.5rem",
    background: "#8b5cf6",
    padding: "0.75rem",
    textAlign: "center",
    fontSize: "0.75rem",
    fontWeight: 700,
    color: "#ffffff",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo space-y-4">
        {items.map(w => <div key={w.cls}>
            <span className="tw-label">
              {w.cls} <span style={{
    color: "var(--demo-fg-faint)"
  }}>({w.meta})</span>
            </span>
            <div style={{
    overflowX: "auto"
  }}>
              <div style={{
    ...blockStyle,
    minWidth: w.val
  }}>{w.desc}</div>
            </div>
          </div>)}
      </div>
    </div>;
};

## Overview

Min-width utilities use the same suffix families as width, so you can add a floor without switching naming systems.

| Pattern                    | Supported values                                                                     |
| -------------------------- | ------------------------------------------------------------------------------------ |
| `minimum-width-<size>`     | `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl` |
| `minimum-width-<fraction>` | `1-2`, `1-3`, `2-3`, `1-4`, `3-4`                                                    |
| `minimum-width-<value>`    | `px`, `auto`, `full`, `screen`                                                       |

## Examples

### Using the size scale

Use the t-shirt scale when an element should never shrink below a predictable readable width.

<MinWidthDemo />

```html theme={null}
<div class="elementor-element width-2xs overflow-auto rounded-lg padding-3 background-gray-light">
  <div class="minimum-width-xl padding-3 background-primary text-white rounded text-center text-sm font-bold">
    minimum-width-xl
  </div>
</div>
```

| Pattern                | Supported classes                                                                                                                                                                                                                                                          | What it controls                        |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
| `minimum-width-<size>` | `minimum-width-3xs`, `minimum-width-2xs`, `minimum-width-xs`, `minimum-width-sm`, `minimum-width-md`, `minimum-width-lg`, `minimum-width-xl`, `minimum-width-2xl`, `minimum-width-3xl`, `minimum-width-4xl`, `minimum-width-5xl`, `minimum-width-6xl`, `minimum-width-7xl` | Minimum widths based on the size ladder |

### Using a percentage

Use fractional min-width utilities when a child should keep a minimum share of the row, even as the layout compresses.

<MinWidthFractionalDemo />

```html theme={null}
<div class="elementor-element flex flex-wrap gap-4">
  <div class="minimum-width-1-2 flex-grow padding-4 background-primary text-white rounded text-center text-sm font-bold">
    minimum-width-1-2
  </div>
  <div class="minimum-width-1-2 flex-grow padding-4 background-success text-white rounded text-center text-sm font-bold">
    minimum-width-1-2
  </div>
</div>
```

| Pattern                    | Supported classes                                                                                       | What it controls                            |
| -------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| `minimum-width-<fraction>` | `minimum-width-1-2`, `minimum-width-1-3`, `minimum-width-2-3`, `minimum-width-1-4`, `minimum-width-3-4` | Minimum width as a percentage of the parent |

### Matching the parent width floor

Use `minimum-width-full` when an element should never shrink below the full width of its parent.

<MinWidthFullDemo />

```html theme={null}
<div class="elementor-element rounded-lg padding-3 background-gray-light">
  <div class="minimum-width-full padding-3 background-primary text-white rounded text-center text-sm font-bold">
    minimum-width-full
  </div>
</div>
```

| Pattern              | Supported classes    | What it controls                              |
| -------------------- | -------------------- | --------------------------------------------- |
| `minimum-width-full` | `minimum-width-full` | Uses the full parent width as a minimum floor |

### Matching the viewport floor

Use `minimum-width-screen` when an element should keep a viewport-width floor instead of collapsing with a narrower parent container.

<MinWidthScreenDemo />

```html theme={null}
<div class="elementor-element overflow-hidden rounded-lg">
  <div class="minimum-width-screen padding-3 background-primary text-white text-center text-sm font-bold">
    minimum-width-screen
  </div>
</div>
```

| Pattern                | Supported classes      | What it controls                           |
| ---------------------- | ---------------------- | ------------------------------------------ |
| `minimum-width-screen` | `minimum-width-screen` | Uses the viewport width as a minimum floor |

### Resetting the minimum width

Use `minimum-width-auto` when an element should fall back to the browser's default minimum-width behavior.

<MinWidthAutoDemo />

```html theme={null}
<div class="elementor-element rounded-lg padding-3 background-gray-light">
  <div class="minimum-width-auto inline-block padding-3 background-secondary text-black rounded text-center text-sm font-bold">
    minimum-width-auto
  </div>
</div>
```

| Pattern              | Supported classes    | What it controls                                     |
| -------------------- | -------------------- | ---------------------------------------------------- |
| `minimum-width-auto` | `minimum-width-auto` | Resets the minimum width to automatic browser sizing |

## Best Practices

* Use `minimum-width-<size>` when a panel, card, or rail should never collapse below a readable width.
* Use `minimum-width-<fraction>` when flex items should keep a minimum share of the row.
* Use `minimum-width-full` for children that must stay as wide as their parent.
* Use `minimum-width-screen` carefully because it can force horizontal overflow inside narrow containers.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Width" icon="arrows-left-right" href="/sizing/width">
    Bundled width utilities
  </Card>

  <Card title="Max Width" icon="arrows-left-right-to-line" href="/sizing/max-width">
    Constrain maximum size alongside minimum width
  </Card>
</CardGroup>