Skip to main content

​
Overview

min-w-* uses the same suffixes as width so you can set a floor without switching naming systems.
ClassValueUsage
.min-w-full100%Match the full parent width as a floor
.min-w-autoautoLet the browser calculate the minimum width
.min-w-px1pxKeep a hairline minimum present
.min-w-3xs16rem / 256pxSmall card floor
.min-w-2xs18rem / 288pxCompact panel floor
.min-w-xs20rem / 320pxSmall content block floor
.min-w-sm24rem / 384pxSidebar floor
.min-w-md28rem / 448pxReading panel floor
.min-w-lg32rem / 512pxStandard feature floor
.min-w-xl36rem / 576pxWide card floor
.min-w-2xl42rem / 672pxMedium content rail floor
.min-w-3xl48rem / 768pxContainer floor
.min-w-4xl56rem / 896pxLarge shell floor
.min-w-5xl64rem / 1024pxWide shell floor
.min-w-6xl72rem / 1152pxExtra-wide shell floor
.min-w-7xl80rem / 1280pxLargest shipped floor

​
Fractional min-widths

ClassValueCSSUsage
.min-w-1-250%min-width: 50%;Half-width floor
.min-w-1-333.333%min-width: 33.333%;Third-width floor
.min-w-2-366.666%min-width: 66.666%;Two-thirds floor
.min-w-1-425%min-width: 25%;Quarter-width floor
.min-w-3-475%min-width: 75%;Three-quarters floor
<div class="elementor-element flex flex-wrap gap-4">
  <div class="min-w-1-2 flex-grow p-4 bg-primary text-white rounded text-center font-bold">
    min-w-1-2
  </div>
  <div class="min-w-1-2 flex-grow p-4 bg-teal text-white rounded text-center font-bold">
    min-w-1-2
  </div>
</div>
min-w-1-2 stops a flex child from shrinking below half the parent width, which keeps two-up rows readable once they wrap.

​
Two-thirds main column

<div class="elementor-element flex flex-wrap gap-6">
  <aside class="w-1-4 p-4 bg-gray-light rounded">
    Sidebar
  </aside>
  <main class="min-w-2-3 flex-grow p-6 bg-white rounded border-1 border-solid border-gray text-black">
    Main stays at least two-thirds of the row when space allows.
  </main>
</div>
This keeps the main content rail from collapsing too aggressively beside a sidebar.

​
Prevent a sidebar from collapsing

<div class="elementor-element flex gap-6">
  <aside class="min-w-sidebar w-1-4 p-6 bg-gray-light rounded">
    Sidebar content
  </aside>
  <main class="w-3-4 p-6 bg-white rounded text-black">
    Main content
  </main>
</div>

​
Keep small cards readable

<div class="elementor-element flex flex-wrap gap-6">
  <div class="min-w-card p-6 bg-white rounded-lg border-1 border-solid border-gray text-black">
    Card content
  </div>
  <div class="min-w-card p-6 bg-white rounded-lg border-1 border-solid border-gray text-black">
    Card content
  </div>
</div>
Use semantic custom classes when you need named presets for sidebars, cards, or fields.
Example classTypical use
.min-w-sidebarSidebars that must not collapse below a readable width
.min-w-cardCard grids with a floor width before wrap
.min-w-fieldForm controls and inputs
.min-w-sidebar {
  min-width: 18rem;
}

.min-w-card {
  min-width: 16rem;
}

.min-w-field {
  min-width: 12rem;
}

​
Best Practices

  • Use .min-w-3xs … .min-w-7xl, fractions, or .min-w-px when you want a floor that matches the Width table.
  • Use min-width only when content becomes unusable below a threshold.
  • Pair custom min-width helpers with width or max-width utilities instead of replacing the bundled sizing system.
  • Test wrapped flex layouts carefully so a minimum width does not force unintended horizontal overflow.
  • Prefer a few semantic custom classes over a large one-off min-width scale.

Width

Bundled width utilities

Max Width

Constrain maximum size alongside minimum width

Custom CSS

Import your own utilities through Skelementor

Sizing

All sizing utilities overview