Max-height and max-width - CSS property.

Description of the properties.

The physical properties max-width and max-height.

The two properties max-height and max-width set the maximum limits for the dimensions of an element. They take precedence over the width and height properties.

These two properties are interesting to combine with dimensions expressed in percentages. The result is an element that adapts to the size of the screen but remains within acceptable limits.

See also the min-height and min-width properties.

The logical properties max-block-size and max-inline-size.

Both of these properties act according to the way the element's language is written. For Latin languages, max-inline-size is equivalent to max-width and max-block-size is equivalent to max-height.

The and properties also exist.

Support for writing mode and language.

The logical properties max-inline-size and max-block-size have the same role as the physical properties max-width and max-height, except that they take into account the direction and mode of writing. This gives the following equivalences, depending on the language.

Values for the max-width and max-height properties.

The logical properties max-block-size and max-inline-size have identical syntax. They are not mentioned in the examples below.

• max-height: auto; max-width: auto;

  The maximum dimensions are determined by the browser based on the values assigned to width and height.

• max-height: none; max-width: none;

  There is no limit on the height or width of the element.

• max-height: 400px; max-width: 400px;

  A limit is set for the dimensions of the element. The value shown must be a positive value, of the dimension type. See CSS dimension units.

  If they are percentages, they are calculated in relation to the dimensions of the parent, with the following conventions:

  1. max-width is calculated relative to the width of the parent element.
  2. max-height is calculated relative to the height of the parent element, provided that this is specified, otherwise the percentages are assimilated to auto.
• max-width: min-content; max-width: max-content; max-width: fit-content;

  These three presets allow you to adjust the minimum width of an element based on its content:

  • min-content : the smallest dimension, which does not require you to cut words but by inserting as many line breaks as necessary.
  • max-content : the largest dimension, i.e. by inserting any line breaks that would not be imposed in the document.
  • fit-content : the widest dimension that is compatible with the available space.

  For examples of how they work and more detailed explanations, refer to the description of the min-content values, max-content and fit-content.

• max-height: stretch; max-width: stretch;

  Awaiting definition.

• max-height: initial; (none) max-height: inherit; max-height: revert; max-height: revertLayer; max-height: unset;

  max-width: initial; (none) max-width: inherit; max-width: revert; max-width: revertLayer; max-width: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, unset.

Animation of the max-width property.

The example is written for the max-width property, but would of course work the same way for one of the max-height, max-block-size, or max-inline-size.

It is quite rare to animate these properties because their effect may very well be invisible on the screen if the actual dimensions of the element do not exceed the maximum values.

Manipulating the max-height property programmatically.

Change the value of max-height with Javascript.

There are two Javascript syntaxes that allow you to change the value of max-height. The first uses the usual notation in CSS: kebab-case for the name of the property (a hyphen to separate words), and the second uses the more common notation in Javascript, in (a capital letter to separate words).

let el = document.getElementById('id'); el.style['max-height'] = '1rem'; // or let el = document.getElementById('id'); el.style.maxHeight = '1rem';

Read in Javascript the value of max-height.

This code retrieves the value of max-height when it has been initialized in the style attribute of the element (i.e. in the HTML code). The value assigned via a CSS selector is not taken into account.

The value is returned in the same unit that is used to define it, in the style attribute.

let el = document.getElementById('id'); let value = el.style['max-height']; // or let el = document.getElementById('id'); let value = el.style.maxHeight;

Read the computed value of max-height in Javascript.

The computed value is that which results from the evaluation of the relative units (in particular the percentage) and the resolution of the cascade of the inheritances. The computed value is always set: this can be a value assigned via the style attribute in the HTML, a value assigned via a CSS selector, an inherited value, or the initial value of the property.

In the case of max-height, the maximum height or width is returned in pixels, regardless of the unit used to define it (except percentages).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('max-height');

Change the value of the max-height property with JQuery.


$('#id').css('max-height', '1rem');
// or
$('#id').css('maxHeight', '1rem');


Read the computed value of the max-height property with JQuery.

The property can be read with the following codes. As in Javascript, the maximum height and width are returned in pixels or percentages.

let value = $('#id').css('max-height');

Demonstration.

Use the buttons below to view the value applied for the first button, and the calculated value for the second button. The calculated value is interesting to see how the value is stored (serialized). In particular, it can be seen that the values expressed in units other than pixels are converted to pixels, except for the percentage.

Browsers compatibility.

No compatibility issues with the max-height and max-width properties, or with equivalent logical properties. However, the stretch value is still poorly recognized (2024) and should be used with caution. The same is true for the fit-content() function. Firefox   allows you to activate this possibility by modifying a flag (access flags on Firefox).

Notes:

(2) From CSS2.1, Firefox applies max-height to tables as well.

(1) Uses the non-standard -wekbit-fill-available value.

(3) Disabled by default. Can be activated with the layout.css.fit-content_function.enabled flag.

1

max-width
max-height
properties

2

max-inline-size
max-block-size
properties

3

stretch
value

4

fit-content()
function

Estimated overall support.

97%

96%

0%

0%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

1

Edge

1

Opéra

2

1

Safari

Safari sur IOS

Androïd Brower

1

Chrome pour Androïd

1

Firefox pour Androïd

Samsung Internet

1

Firefox

2

3

Chrome

1

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Caniuse

max-height property historic

• Cascading Style Sheets Level 2 - Revision 1 Specification

  First definition of the max-height and max-width properties.
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• CSS Logical Properties and Values Level 1

  Introduction of logical properties max-block-size and max-inline-size, which adapt to the way the language is written.
  

  May 18, 2017

  Working Draft.

  

  

  

• CSS Box Sizing Module Level 3

  Adding new values for the max... properties : auto, min-content, max-content values and the fit-content() function.
  

  September 27, 2012

  Working Draft.

  

  

  

• CSS Box Sizing Module Level 4

  No change regarding the max-height and max-width properties, nor to the corresponding logical properties.
  

  May 26, 2020

  Working Draft.

  

  

  

See also, in the same module as max-height

The CSS specifications published by the W3C are organized into modules. The max-height and max-width properties are part of the CSS Box Sizing Module, as well as the logical max-inline-size and max-block-size. The following definitions are also described in this same module.

Properties:

aspect-ratio

Sets the ratio of the width to the height of the element.

block-size

Defines the dimension of an element following the direction of the blocks.

box-sizing

Defines how block dimensions are calculated: whether or not to include borders and padding.

contain-intrinsic-block-size

Sets the dimension of the element in the direction of the blocks, when the element is confined.

contain-intrinsic-height

Sets the intrinsic height of the element when it is confined.

contain-intrinsic-inline-size

Sets the dimension of the element in the direction of the lines, when the element is confined.

contain-intrinsic-size

Sets the dimensions of the element (blocks and rows) when the element is confined.

contain-intrinsic-width

Sets the intrinsic width of the element when it is confined.

height

Sets the height of the element.

inline-size

Sets the dimension of the element in the direction of the lines.

max-width

Sets the maximum width of the element.

min-height

Sets the minimum height of the element.

min-width

Sets the minimum width of the element.

width

Sets the width of the element.

Functions:

Values: