Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1050414 of min-width

  • Revision slug: Web/CSS/min-width
  • Revision title: min-width
  • Revision id: 1050414
  • Created:
  • Creator: dmitriz
  • Is current revision? Yes
  • Comment Fix typos

Revision Content

{{CSSRef}}

Summary

The min-width property is used to set the minimum width of a given element. It prevents the used value of the {{ Cssxref("width") }} property from becoming smaller than the value specified for min-width.

 The element width is set to the value of min-width whenever min-width is larger than {{ Cssxref("max-width") }} or whenever min-width is larger than {{ Cssxref("width") }} . 

{{cssinfo}}

Syntax

/* <length> value */
min-width: 3.5em;

/* <percentage> value */
min-width: 10%;

/* Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;

Values

<length>
The fixed minimum width. See {{cssxref("<length>")}} for possible units. Negative values make the declaration invalid.
<percentage>
The fixed minimum width expressed as a {{cssxref("<percentage>")}} of containing block's width. Negative values make the declaration invalid.
auto
The default minimum size for flex items, providing a more reasonable default than 0 for other layouts.
max-content {{ experimental_inline() }}
The intrinsic preferred width.
min-content {{ experimental_inline() }}
The intrinsic minimum width.
fill-available{{ experimental_inline() }}
The containing block width minus horizontal margin, border and padding. Some browsers implement an ancient name for this keyword, available.
fit-content {{ experimental_inline() }}
Defined as min(max-content, max(min-content, fill-available).

Formal syntax

{{csssyntax}}

Examples

table { min-width: 75%; }

form { min-width: 0; }

Specifications

Specification Status Comment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }} {{ Spec2('CSS3 Sizing') }} Adds the max-content, min-content, fit-content, and fill-available keywords. (At some times in the past, both CSS3 Box and CSS3 Writing Modes drafts defined these keywords. These drafts has been superseded by this specification.)
{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }} {{ Spec2('CSS3 Flexbox') }} Added the auto keyword and used it as the initial value.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }} {{ Spec2('CSS3 Transitions') }} Defines min-width as animatable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }} {{ Spec2('CSS2.1') }} Initial definition

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) 7.0 4.0 2.0.2 (416), buggy before
applies to <table> [1] {{ CompatNo() }} {{ CompatVersionUnknown() }} {{ CompatNo() }} {{ CompatVersionUnknown() }} {{ CompatNo() }}
max-content, min-content, fit-content, and fill-available {{ experimental_inline() }} 24.0 {{property_prefix("-webkit")}} [3] {{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }} [2] {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} [3]
auto 21.0 [4] {{ CompatGeckoDesktop("16.0") }} [4]
Removed in {{ CompatGeckoDesktop("22.0") }}
Reintroduced in {{CompatGeckoDesktop("34.0")}} with the new behavior defined by the spec.
{{ CompatNo() }} 12.10 [6] {{ CompatNo() }}
auto as initial value{{obsolete_inline()}} 21.0 {{ CompatGeckoDesktop("18.0") }}
Removed in {{ CompatGeckoDesktop("22.0") }}
{{ CompatNo() }} 12.10 {{ CompatNo() }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
applies to <table> [1] {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
max-content, min-content, fit-content, and fill-available {{ experimental_inline() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
auto {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
auto as initial value{{obsolete_inline()}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

[1] CSS 2.1 explicitly leaves the behavior of min-width with {{ HTMLElement("table") }} undefined. Therefore any behavior is CSS2.1-compliant; newer CSS specifications may define this behavior, so Web developers shouldn't rely on a specific one now.

[2] Gecko experimentally implements the definitions given in CSS3 Basic Box. This one defines available and not fill-available. Also the definition of fit-content is simpler than in CSS3 Intrinsic.

[3] WebKit also implements an earlier proposal, the keyword intrinsic.

[4] These implementations where implementing a slightly simpler behavior for this keyword: it computed to min-content on flex items, and it computes to 0 on everything else.

See also

  • {{ Cssxref("width") }}, {{ Cssxref("max-width") }}, {{ Cssxref("min-height") }}
  • The box model, {{ Cssxref("box-sizing") }}

Revision Source

<div>{{CSSRef}}</div>

<h2 id="Summary">Summary</h2>

<p>The <strong><code>min-width</code></strong> property is used to set the minimum width of a given element. It prevents the used value of the {{ Cssxref("width") }} property from becoming smaller than the value specified for <code>min-width</code>.</p>

<p>&nbsp;The element&nbsp;width is set to the&nbsp;value of <code>min-width</code>&nbsp;whenever <code>min-width</code> is larger than&nbsp;{{ Cssxref("max-width") }} or whenever <code>min-width</code> is larger than&nbsp;{{ Cssxref("width") }} .&nbsp;</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">
/* &lt;length&gt; value */
min-width: 3.5em;

/* &lt;percentage&gt; value */
min-width: 10%;

/* Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>The fixed minimum width. See {{cssxref("&lt;length&gt;")}} for possible units. Negative values make the declaration invalid.</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>The fixed minimum width expressed as a {{cssxref("&lt;percentage&gt;")}} of containing block's width. Negative values make the declaration invalid.</dd>
 <dt><code>auto</code></dt>
 <dd>The default minimum size for flex items, providing a more reasonable default than 0 for other layouts.</dd>
 <dt><code>max-content</code> {{ experimental_inline() }}</dt>
 <dd>The intrinsic preferred width.</dd>
 <dt><code>min-content</code> {{ experimental_inline() }}</dt>
 <dd>The intrinsic minimum width.</dd>
 <dt><code>fill-available</code>{{ experimental_inline() }}</dt>
 <dd>The containing block width minus horizontal margin, border and padding. Some browsers implement an ancient name for this keyword, <code>available</code>.</dd>
 <dt><code>fit-content</code> {{ experimental_inline() }}</dt>
 <dd>Defined as <code>min(max-content, max(min-content, fill-available)</code>.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Examples">Examples</h2>

<pre class="brush:css;">
table { min-width: 75%; }

form { min-width: 0; }
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}</td>
   <td>{{ Spec2('CSS3 Sizing') }}</td>
   <td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords. (<em>At some times in the past, both CSS3 Box and CSS3 Writing Modes drafts defined these keywords. These drafts has been superseded by this specification.</em>)</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}</td>
   <td>{{ Spec2('CSS3 Flexbox') }}</td>
   <td>Added the <code>auto</code> keyword and used it as the initial value.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Defines <code>min-width</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>1.0 (1.0)</td>
   <td>7.0</td>
   <td>4.0</td>
   <td>2.0.2 (416), buggy before</td>
  </tr>
  <tr>
   <td>applies to <code>&lt;table&gt; </code>[1]</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td><code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-</code><code>available</code> {{ experimental_inline() }}</td>
   <td>24.0 {{property_prefix("-webkit")}} [3]</td>
   <td>{{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }} [2]</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }} [3]</td>
  </tr>
  <tr>
   <td><code>auto</code></td>
   <td>21.0 [4]</td>
   <td>{{ CompatGeckoDesktop("16.0") }} [4]<br />
    Removed in {{ CompatGeckoDesktop("22.0") }}<br />
    Reintroduced in {{CompatGeckoDesktop("34.0")}} with the new behavior defined by the spec.</td>
   <td>{{ CompatNo() }}</td>
   <td>12.10 [6]</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td><code>auto</code> as initial value{{obsolete_inline()}}</td>
   <td>21.0</td>
   <td>{{ CompatGeckoDesktop("18.0") }}<br />
    Removed in {{ CompatGeckoDesktop("22.0") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>12.10</td>
   <td>{{ CompatNo() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>applies to <code>&lt;table&gt; </code>[1]</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-</code><code>available</code> {{ experimental_inline() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>auto</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>auto</code> as initial value{{obsolete_inline()}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] CSS 2.1 explicitly leaves the behavior of <code>min-width</code> with {{ HTMLElement("table") }} undefined. Therefore any behavior is CSS2.1-compliant; newer CSS specifications may define this behavior, so Web developers shouldn't rely on a specific one now.</p>

<p>[2] Gecko experimentally implements the definitions given in CSS3 Basic Box. This one defines <code>available</code> and not <code>fill-available</code>. Also the definition of <code>fit-content</code> is simpler than in CSS3 Intrinsic.</p>

<p>[3] WebKit also implements an earlier proposal, the keyword <code>intrinsic</code>.</p>

<p>[4] These implementations where implementing a slightly simpler behavior for this keyword: it computed to <code>min-content</code> on flex items, and it computes to <code>0</code> on everything else.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{ Cssxref("width") }}, {{ Cssxref("max-width") }}, {{ Cssxref("min-height") }}</li>
 <li>The <a href="/en-US/docs/Web/CSS/box_model" title="en/CSS/box_model">box model</a>, {{ Cssxref("box-sizing") }}</li>
</ul>
Revert to this revision