PLAY CSS
jaen

Box

min-width

min-width sets a lower limit on the width of an element. Even when width, the parent, or the content would make it narrower, it never gets narrower than min-width.

Syntax

auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)

Preview

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize

Code

.box {
  width: 120px;
  min-width: 200px;
}

Controls

min-width200px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

About

Writing the value

  • A length such as 200px, or 50%: never narrower than that. Percentages are of the parent's width.
  • auto: usually no lower limit. This is the initial value. For flex and grid items, the width that keeps the content from overflowing becomes the limit.
  • min-content, max-content and fit-content: use a width decided by the content as the limit. With min-content, the box never gets narrower than its longest word.

When it conflicts with width

The preview on this page adds min-width to a box with width: 120px. When min-width is wider, min-width wins. It also wins over max-width.

Drag the handle at the bottom right of the preview box to shrink it: it stops at min-width.

References

MDN Web Docsmin-widthSpecificationCSS Box Sizing Module Level 3Can I usemin-width

Comments

PLAY CSS