Revision 1046688 of max-width

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

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

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

<p>{{ Cssxref("max-width") }} overrides {{cssxref("width")}}, but {{ Cssxref("min-width") }} overrides {{ Cssxref("max-width") }}.</p>

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

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

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

/* &lt;percentage&gt; value */
max-width: 75%;

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

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

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

<dl>
 <dt><code>none</code></dt>
 <dd>The width has no maximum value.</dd>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>See {{cssxref("&lt;length&gt;")}} for possible units.</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>Specified as a {{cssxref("&lt;percentage&gt;")}} of containing block's width.</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>The same as <code>max-content.</code></dd>
</dl>

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

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

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

<p>In this example, the "child" &lt;div&gt; has its width property set so that it will use the full width of the parent &lt;div&gt; but the max-width property constrains its width to 150px.</p>

<div id="basic-max-width-demo">
<pre class="brush: html">
&lt;div id="parent"&gt;
    &lt;div id="child"&gt;
        The Mozilla community produces a lot of great software.
    &lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">
#parent { width: 300px; }

#child  { background: gold;
          width: 100%;
          max-width: 150px;
        }
</pre>
</div>

<p>{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}</p>

<p>The fit-content value can be used to set the width of an element based on the intrinsic size required by its content:</p>

<div id="fit-content-demo">
<pre class="brush: html" style="display:none">
&lt;div id="parent"&gt;
    &lt;div id="child"&gt;
        Child Text
    &lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">
#parent { background: lightblue;
          width: 300px; }

#child  { background: gold;
          width: 100%;
          max-width: -moz-fit-content;
          max-width: -webkit-fit-content;
        }
</pre>
</div>

<p>{{EmbedLiveSample("fit-content-demo", 400, 100)}}</p>

<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', 'max-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.<br />
    <em>Both CSS3 Box and CSS3 Writing Modes drafts defined at some point these keywords. These drafts are superseded by this spec.</em></td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Defines <code>max-width</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-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>{{CompatGeckoDesktop("1.0")}}</td>
   <td>7.0</td>
   <td>4.0</td>
   <td>2.0.2 (416),<br />
    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 rowspan="1"><code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-</code><code>available</code> {{ experimental_inline() }}</td>
   <td>{{ CompatNo() }} [3]</td>
   <td>{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}} [2]</td>
   <td rowspan="1">{{ CompatNo() }}</td>
   <td rowspan="1">{{ CompatNo() }}</td>
   <td>{{ CompatNo() }} [3]</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</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>
  </tr>
 </tbody>
</table>
</div>

<p>[1] CSS 2.1 explicitly leaves the behavior of <code>max-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 Sizing.</p>

<p>[3] WebKit implements an earlier proposal for setting the height to an intrinsic height: the keywords <code>intrinsic</code>, instead of <code>max-content</code>, and <code>min-intrinsic</code>, instead of <code>min-content</code> There is no equivalent for <code>fill-available</code> or <code>fit-content</code>.</p>

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

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