max-height

  • Revision slug: CSS/max-height
  • Revision title: max-height
  • Revision id: 345117
  • Created:
  • Creator: parthiv
  • Is current revision? No
  • Comment Tagged as NeedsMobileBrowserCompatibility

Revision Content

{{ CSSRef() }}

Summary

The max-height CSS property is used to set the maximum height of a given element. It prevents the used value of the {{ Cssxref("height") }} property from becoming larger than the value specified for max-height.

{{ Cssxref("max-height") }} overrides {{cssxref("height")}}, but {{ Cssxref("min-height") }} overrides {{ Cssxref("max-height") }}.

  • {{ Xref_cssinitial() }} {{ Cssxref("none") }}
  • Applies to block level and replaced elements
  • {{ Xref_cssinherited() }} no
  • Percentages yes, see below
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} the percentage as specified or the absolute length or none

Syntax

Formal syntax:  <length> | <percentage> | none | max-content | min-content | fit-content | fill-available
max-height: 3.5em
max-height: 75%
max-height: none
max-height: max-content
max-height: min-content
max-height: fit-content
max-height: fill-available

max-height: inherit

Values

<length>
A fixed maximum height. See {{ Xref_csslength() }} for possible units.
<percentage>
The {{ Xref_csspercentage() }} is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none.
none
No limit on the height of the box.
max-content{{experimental_inline()}}
The intrinsic preferred height.
min-content{{experimental_inline()}}
The intrinsic minimum height.
fill-available{{experimental_inline()}}
The containing block height minus horizontal margin, border and padding. Some browsers implement an ancient name for this keyword, available.
fit-content{{experimental_inline()}}
The same as max-content.

Examples

table { max-height: 75%; }

form { max-height: none; }

Specifications

Specification Status Comment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height') }} {{ Spec2('CSS3 Sizing') }} Adds the max-content, min-content, fit-content, and fill-available keywords.
Both CSS3 Box and CSS3 Writing Modes drafts defined at some point these keywords. These drafts are superseded by this spec.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-height') }} {{ Spec2('CSS3 Transitions') }} Defines max-height as animatable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height') }} {{ Spec2('CSS2.1') }} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{CompatGeckoDesktop("1.0")}} 7.0 7.0 1.0
applies to <table> [1] {{ CompatNo() }} {{CompatVersionUnknown()}} {{ CompatNo() }} {{CompatVersionUnknown()}} {{ CompatNo() }}
max-content, min-content, fit-content, and fill-available {{ experimental_inline() }} {{ CompatNo() }} [3] {{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}} [2] {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} [3]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Notes

[1] CSS 2.1 explicitely leaves the behavior of max-height 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 Sizing.

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

See also

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

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>max-height</code> CSS property is used to set the maximum height of a given element. It prevents the used value of the {{ Cssxref("height") }} property from becoming larger than the value specified for <code>max-height</code>.</p>
<p>{{ Cssxref("max-height") }} overrides {{cssxref("height")}}, but {{ Cssxref("min-height") }} overrides {{ Cssxref("max-height") }}.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> {{ Cssxref("none") }}</li>
  <li><dfn>Applies to</dfn> block level and replaced elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Percentages</dfn> yes, see below</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> the percentage as specified or the absolute length or <code>none</code></li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
Formal syntax:  &lt;length&gt; | &lt;percentage&gt; | none | max-content | min-content | fit-content | fill-available
</pre>
<pre>
max-height: 3.5em
max-height: 75%
max-height: none
max-height: max-content
max-height: min-content
max-height: fit-content
max-height: fill-available

max-height: inherit
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
  <dt>
    <code>&lt;length&gt;</code></dt>
  <dd>
    A fixed maximum height. See {{ Xref_csslength() }} for possible units.</dd>
  <dt>
    <code>&lt;percentage&gt;</code></dt>
  <dd>
    The {{ Xref_csspercentage() }} is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as <code>none</code>.</dd>
  <dt>
    <code>none</code></dt>
  <dd>
    No limit on the height of the box.</dd>
  <dt>
    <code>max-content</code>{{experimental_inline()}}</dt>
  <dd>
    The intrinsic preferred height.</dd>
  <dt>
    <code>min-content</code>{{experimental_inline()}}</dt>
  <dd>
    The intrinsic minimum height.</dd>
  <dt>
    <code>fill-available</code>{{experimental_inline()}}</dt>
  <dd>
    The containing block height 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>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: css">
table { max-height: 75%; }

form { max-height: none; }
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height') }}</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-height') }}</td>
      <td>{{ Spec2('CSS3 Transitions') }}</td>
      <td>Defines <code>max-height</code> as animatable.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height') }}</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>7.0</td>
        <td>1.0</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>
<h3 id="Notes">Notes</h3>
<p>[1] CSS 2.1 explicitely leaves the behavior of <code>max-height</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" name="See_also">See also</h2>
<p><a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model">The box model</a>, {{ Cssxref("max-width") }}, {{ Cssxref("box-sizing") }}, {{ Cssxref("height") }}, {{ Cssxref("min-height") }}</p>
Revert to this revision