min-width

The min-width property in CSS is used to set the minimum width of a specified element. Themin-width property always overrides the width property whether followed before or afterwidth in your declaration. Authors may use any of the length values as long as they are a positive value.

.wrapper {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

<h1>min-width</h1>

<figure class="demo">
  <p class="min min600">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <figcaption>Width = 80% / Minimum Width = 600px</figcaption>
</figure>

<figure class="demo">
  <p class="min min320">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <figcaption>Width = 100% / Minimum Width = 320px</figcaption>
</figure>

<figure class="demo">
  <p class="min min480">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <figcaption>Width = 600px / Minimum Width = 480px (won't work)</figcaption>
</figure>

<figure class="demo">
  <p class="min min-percent">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <figcaption>Width = 100% / Minimum Width = 50% (won't work)</figcaption>
</figure>

<figure class="demo">
  <p class="min em40">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <figcaption>Width = 100% / Minimum Width = 40em</figcaption>
</figure>

<figure class="demo">
  <p class="min rem40">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <figcaption>Width = 100% / Minimum Width = 40rem</figcaption>
</figure>

<h3>Tables</h3>
<figure class="demo">
  <table class="min mintable">
		<thead>
			<tr>
				<th class="chrome"><span>Chrome</span></th>
				<th class="safari"><span>Safari</span></th>
				<th class="firefox"><span>Firefox</span></th>
				<th class="opera"><span>Opera</span></th>
				<th class="ie"><span>IE</span></th>
				<th class="android"><span>Android</span></th>
				<th class="iOS"><span>iOS</span></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="yep-nope">24 </td>
				<td class="yep-nope">5.1 </td>
				<td class="yep-nope">18 </td>
				<td class="yep-nope">12.1 </td>
				<td class="yep-nope">8 </td>
				<td class="yep-nope">1.0 </td>
				<td class="yep-nope">2.1 </td>
			</tr>
		</tbody>
	</table>
  <figcaption>Width = 100% / Minimum Width = 600px</figcaption>
</figure>

<footer>
  <p><small>*These examples use the entire viewport width in order to understand and grasp the concepts outlined. Squeeze your browser to witness the results.</small></p>
</footer>

//========================================
// $Global Styles
//========================================

html {
  background: #444444;
  color: #ffffff;
}

.demo {
  background: #000;
}

//========================================
// $Minimum Width Demo
//========================================

.min {
  background: #e78629;
}

// Min-Width Length Values
// ========================================

// minimum 600px
.min600 {
  width: 80%;
  min-width: 600px;
}

// minimum 320px
.min320 {
  width: 100%;
  min-width: 320px;
}

// minimum 480px
.min480 {
  width: 600px;
  min-width: 480px;
}

// minimum 50%
.min-percent {
  width: 100%;
  min-width: 50%;
}

// minimum 40em
.rem40 {
  width: 100%;
  min-width: 40em;
}

// minimum 40rem
.rem40 {
  width: 100%;
  min-width: 40rem;
}


// Min-Width TABLES
// ========================================

// minimum 30em
.mintable {
  width: 100%;
  min-width: 600px;
}

Be mindful when assuming min-width is inherited as this property does not inherit from other parent elements. If authors define a width using an absolute value (px, pt, in, cm, mm), the min-width will not take affect as the width has been defined indefinitely. For example, if a value of 200px is used as a width length, your min-width value of 100px will not be neccessary as you have already specified an absolute value for the width (i.e. 200px). The best way to use min-width is to define a width value as a percentage and use an absolute value for the min-width property otherwise using a percentage value for for both min-width and width will not produce the expected result.

Related Properties

• width
• max-width

Browser Support

IE7 doesn’t support “inherit” as a value.