The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

W3C Recommendation


Sets the minimum width of an element. It limits the width property to be not smaller than the value specified in min-width.

Overview table

Initial value 0
Applies to all elements but non-replaced inline elements, tables, inline tables, table cells, table columns, and column groups
Inherited No
Media visual
Computed value the percentage as specified or the absolute length or 'none'
Animatable Yes
CSS Object Model Property min-width
Percentages yes


  • min-width: calc()
  • min-width: fill-available
  • min-width: fit-content
  • min-width: inherit
  • min-width: length
  • min-width: max-content
  • min-width: min-content
  • min-width: none
  • min-width: percentage


Specifies a fixed width. Negative values are not allowed. See length for possible units.

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.

See css calc function for mode details.

Takes the same specified value as the property for the element's parent.

Default. Clears the min-width value. The width property can have any value.

The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.

The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.

Fill the entire available space of from the containing block (Width minus vertical margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.

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


Use min-width with any CSS selector to apply it.

/* Restrict all div elements to a min-width of 100px */
div { min-width: 100px }

Constrain the width of a div element using min-width and max-width attributes.


/* Width set to 50% */
.width {

/* min-width set to 600px */
.minwidth {
	width: 50%;
	min-width: 600px;
	background: lightblue;

/* max-width set to 600px */
.maxwidth {
	width: 50%;
	max-width: 200px;
	background: lightgreen

/* Content with border and padding */
.content {
    border:1px solid #c00;

<h3>Resize the window to grow and shrink the div from max to min width.</h3>
<div class="width">
        <p class="content">This div also has a width of 50%. <br/><br/>
         Note that the div height increases to accommodate the flow of text.</p>
<div class="minwidth">
	<p class="content">This div also has a width of 50%.<br /><br /> It also has a min-width of 600px.</p>
<div class="maxwidth">
	<p class="content">This div also has a width of 50%.<br /><br /> It also has a max-width of 200px.</p>

View live example


 CSS min width is well supported across most browsers. A few things to consider while usage:
  • min-width overrides max-width. If min-width supplied is greater than max-width, max-width does not have an impact.
  • max-content, min-content, fit-content, and fill-available are in W3C draft stage and not supported across all browsers.
  • Support for calc is better across browsers. Vendor prefixes may be needed.



The min-width/max-width attributes apply to floating and absolutely positioned block and inline-block elements, as well as some intrinsic controls. They do not apply to non-replaced inline elements, such as table rows and row/column groups. (A "replaced" element has intrinsic dimensions, such as an img or textArea.) This property is enabled only under the strict !DOCTYPE.

Related specifications

Specification Status Related Changes
CSS 2.1 (Section 10.4) W3C Recommendation
CSS Intrinsic & Extrinsic Sizing Module Level 3 Working Draft Adds max-content, min-content, fit-content, and fill-available.

See also

Related articles

Box Model

  • min-width

Related pages (MSDN)


This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]