min-width

< css‎ | properties
Jump to: navigation, search

min-width

This article is Ready to Use.


W3C Recommendation

Summary

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

Syntax

  • !important: declaration
  • -ms-flex-pack: center
  • -ms-flex-pack: end
  • -ms-flex-pack: justify
  • -ms-flex-pack: start
  • align-content: center
  • align-content: flex-end
  • align-content: flex-start
  • align-content: space-around
  • align-content: space-between
  • align-content: stretch
  • align-items: baseline
  • align-items: center
  • align-items: flex-end
  • align-items: flex-start
  • align-items: stretch
  • align-self: auto
  • align-self: baseline
  • align-self: center
  • align-self: flex-end
  • align-self: flext-start
  • align-self: stretch
  • alignment-adjust: <length>
  • alignment-adjust: <percentage>
  • alignment-adjust: after-edge
  • alignment-adjust: alphabetic
  • alignment-adjust: auto
  • alignment-adjust: baseline
  • alignment-adjust: before-edge
  • alignment-adjust: central
  • alignment-adjust: hanging
  • alignment-adjust: ideographic
  • alignment-adjust: mathematical
  • alignment-adjust: middle
  • alignment-adjust: text-after-edge
  • alignment-adjust: text-before-edge
  • all-space-treatment: collapse
  • all-space-treatment: preserve
  • animation-delay: <time>
  • animation-direction: alternate
  • animation-direction: alternate-reverse
  • animation-direction: normal
  • animation-direction: reverse
  • animation-duration: <time>
  • animation-fill-mode: backwards
  • animation-fill-mode: both
  • animation-fill-mode: forwards
  • animation-fill-mode: none
  • animation-iteration-count: <single-animation-iteration-count>
  • animation-iteration-count: infinite
  • ... further results


Values

length
Specifies a fixed width. Negative values are not allowed. See length for possible units.
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.
calc()
See css calc function for mode details.
inherit
Takes the same specified value as the property for the element's parent.
none
Default. Clears the min-width value. The width property can have any value.
max-content
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.
min-content
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-available
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.
fit-content
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.

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
1.0
Yes
7.0
Yes
4.0
Yes
2.0.2
Yes
applies to <table> [1]
?
none
?
Yes
?
none
?
Yes
?
none
max-content, min-content, fit-content, and fill-available
24.0
prefix
?
Unknown
?
none
?
none
?
none
auto
21.0
Yes
?
none
?
none
12.10
Yes
?
none
auto as initial value
21.0
Yes
?
none
?
none
12.10
Yes
?
none

Mobile

Features
Basic support
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
Unknown


Examples

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

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

View live exampleConstrain the width of a div element using min-width and max-width attributes.

HTML

<style>
/* Width set to 50% */
.width {
    width:50%;
    background:#eee;
}

/* 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;
    padding:5px;
}
</style>

<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>
<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>
<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>
</div>

Usage

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.

Notes

Remarks

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.7) W3C Recommendation
CSS Intrinsic & Extrinsic Sizing Module Level 3 Working Draft Adds max-content, min-content, fit-content, and fill-available.

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
min-width 4.0
2.0
7.0
9.0
3.1

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
min-width 2.1
7.0
18.0
18.0
?
10.0
5.0
3.2

See also

Related articles

Box Model





















  • min-width



Related pages (MSDN)

Attribution

This article contains content originally from external sources.

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