max-height

Introduction

To specify max height of a view. It prevents the applied value of height becoming larger than the specified value of max-height. The priority of max-height is higher than height and min-height.

Examples

Syntax

/* <length> */
max-height: 120px;
max-height: 10em;

/* <percentage> */
max-height: 75%;

Values

<length>

<length> Defines the max-height as an absolute value.

<percentage>

Defines the max-height as a percentage of the containing block's height.

Formal definition

Initial valueno limit
Applies toall elements
Inheritedno
Animatable
PercentagesThe percentage is calculated with respect to the height of the generated box's containing block

Formal syntax

/* <length> */
max-height: 120px;
max-height: 10em;

/* <percentage> */
max-height: 75%;

Difference with the Web

mdn:max-height

  1. In Lynx, the priority of max-height is higher than height and min-height. While in Web, max-height overrides height, but min-height overrides max-height.
  2. In Lynx, if max-height is specified smaller than min-height, min-height will be ignored.
  3. none, max-content, min-content, fit-content, min-content are not supported.

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.