The max-height property sets the maximum height of an element's box. The actual height will not exceed this value. Percentages refer to the containing block's height (if defined)..panel {
max-height: 400px;
}.viewport-capped {
max-height: calc(100vh - 4rem);
}min:0max:9999step:1units:% | px | em | rem | vw | vhnoneNo maximum height (default value).min-contentShrink the box to the smallest possible content height.max-contentUse the largest content height.fit-contentFunction value: combines min-content and max-content given the available space.fit-content()fit-content(<length-percentage>) — constrains height by the given length within content constraints.calc()Computes a value from a math expression.CSS Box Sizing Module Level 3Editor's Draft<length-percentage>W3CMDNCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext