Min Width

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

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.

<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.

<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.

<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.

<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.

<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

Width

Bundled width utilities

Max Width

Constrain maximum size alongside minimum width