The min-width property specifies the minimum width to be used for an element.

  • Initial value0
  • Applies toAll elements except non-replaced inline elements and table elements
  • InheritedNo
  • MediaVisual
  • Computed valueThe percentage as specified or the absolute length
  • AnimatableYes
  • CSS VersionCSS2, CSS3
  • JavaScript
Formal syntax: [ [<length> | <percentage>] && [border-box | content-box]? ] | available | min-content | max-content | fit-content

min-width: 200px;
min-width: 40%;
min-width: min-content;
min-width: max-content;
min-width: fit-content;
  • <length>Specifies a fixed width. Negative values are not allowed.
  • <percentage>A percentage relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed.
  • max-contentThe max-content width or height.
  • min-contentThe min-content width or height.
  • availableThe containing block width or height minus margin, border, and padding.
  • fit-contentIf the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.
.class {
   min-width: 50px;

Click the button below to experiment with this property.

Give it a Try!


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.