min-width

Guarantees a minimum width for an element. Prevents elements from shrinking below a certain size, used for button minimum sizes, sidebar fixed widths, input field minimum sizes, etc. Use minw + unit combination.

Class List

Class	CSS	Description
`minw{N}px`	min-width: {N}px	pixel-based min-width (under 20px)
`minw{N}rem`	min-width: {N}rem	rem-based min-width (20px and above, 1rem=10px)
`minw{N}p`	min-width: {N}%	percentage-based min-width
`minwa`	min-width: auto	browser default (content size in flex)
`minwn`	min-width: none	remove min-width limit
`minwfc`	min-width: fit-content	uses fit-content size as minimum
`minwminc`	min-width: min-content	minimum size based on longest word
`minwmaxc`	min-width: max-content	single-line size without wrapping

Visual Comparison

Compares how various min-width values affect an element.

min-width: 200px — minw200px

maintains minimum 200px even with short text

min-width: 30rem (300px) — minw30rem

Short

guarantees minimum 300px based on 1rem = 10px

min-width: 50% — minw50p

minw50p (parent 50%)

does not shrink below half of parent width

min-width: auto — minwa

auto

in flex children, content size becomes the minimum width

Button Minimum Width

Applies min-width to keep buttons at a consistent size even with short text. Essential for UI consistency.

<!-- Button minimum width guaranteed -->
<div class="df gap8px">
  <button class="minw10rem py8px px16px bg6366F1 cFFFFFF br8px bn cp tac">OK</button>
  <button class="minw10rem py8px px16px bg6366F1 cFFFFFF br8px bn cp tac">Cancel</button>
  <button class="minw10rem py8px px16px bg6366F1 cFFFFFF br8px bn cp tac">Submit</button>
</div>

<!-- Wider minimum width -->
<div class="df gap8px">
  <button class="minw16rem py12px px2rem bg34D399 c000000 br8px bn cp tac fw600">Confirm</button>
  <button class="minw16rem py12px px2rem bg27272A cFFFFFF br8px bn cp tac fw600">Cancel</button>
</div>

Before vs after min-width

No min-width:

OKCancelSubmit Form

With minw10rem:

OKCancelSubmit Form

After applying min-width, buttons with short text still maintain a minimum width of 100px

Sets a minimum width in flex or grid layouts to prevent the sidebar from becoming too narrow.

<!-- Sidebar minimum width guaranteed -->
<div class="df gap2rem">
  <aside class="minw20rem fs0 bg18181B p2rem br8px">
    <!-- Min 200px, never shrinks below that -->
    <nav>Sidebar Menu</nav>
  </aside>
  <main class="fg1 minw0">
    <!-- minw0: Prevent flex child overflow -->
    <p>Main Content</p>
  </main>
</div>

<!-- Same in grid layouts -->
<div class="dg gtc25rem-1fr gap2rem">
  <aside class="minw20rem bg18181B p2rem br8px">Sidebar</aside>
  <main>Main Content</main>
</div>

Sidebar + main layout

사이드바 (minw12rem)

메인 콘텐츠 영역 (fg1)

The sidebar does not shrink below 120px

Content-Based Sizing

Keyword classes that determine minimum width based on content instead of fixed values.

fit-content — minwfc

fit-content

Uses content size as the minimum width

min-content — minwminc

min-content

Uses the longest word width as the minimum

max-content — minwmaxc

max-content

Uses the full text width without wrapping as the minimum

<!-- fit-content -->
<div class="minwfc bg18181B p16px br8px">
  Uses content size as minimum width
</div>

<!-- min-content -->
<div class="minwminc bg18181B p16px br8px">
  Uses longest word width as minimum
</div>

<!-- max-content -->
<div class="minwmaxc bg18181B p16px br8px">
  Uses full unwrapped text width as minimum
</div>

Responsive min-width

Combine with media query prefixes to apply different min-width values depending on screen size.

<!-- Remove minimum width on mobile -->
<div class="minw30rem sm-minwa">
  Default 300px min, auto on mobile
</div>

<!-- Button responsive minimum width -->
<button class="minw16rem sm-minw10rem py8px px16px bg6366F1 cFFFFFF br8px bn cp">
  Default 160px → Mobile 100px
</button>

Class Combination	Behavior
`minw30rem sm-minwa`	default 300px minimum, auto below 768px
`minw20rem md-minw16rem`	default 200px minimum, 160px below 1024px
`minw16rem sm-minw10rem`	default 160px minimum, 100px below 768px
`minw0`	fixes flex child overflow issue (all screens)

Tips & Notes

Using min-width for buttons

To keep buttons with short text (OK, No, etc.) at a consistent size, apply minw10rem or minw12rem.

Preventing flex child shrinking

To prevent children from shrinking too much inside a flex container, set minw0 or a specific minimum value. Flex's default min-width is auto, which can cause overflow issues.

minw0 — Fixing flex overflow

When text overflows in a flex child, applying minw0 fixes it. This is because the default min-width: auto on flex children prevents shrinking.

Table cell minimum width

Apply minw12rem etc. to prevent table columns from becoming too narrow, which makes data hard to read.

width max-width height flex-shrink overflow