Notice:
The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

max-height

< css‎ | properties
Jump to: navigation, search

max-height

This article is Ready to Use.

W3C Recommendation

Summary

Sets the maximum height for an element. It prevents the height of the element to exceed the specified value. If min-height is specified and is greater than max-height, max-height is overridden.

Overview table

Initial value none
Applies to All elements but non-replaced inline elements, table columns, and column groups
Inherited No
Media visual
Computed value The percentage as specified or the absolute length or 'none'
Animatable Yes
CSS Object Model Property max-height
Percentages Of the height of containing block. If the height of the containing block depends on the content & the element does not have position as absolute, then this value becomes 'none'.

Syntax

  • max-height: calc()
  • max-height: fill-available
  • max-height: fit-content
  • max-height: inherit
  • max-height: length
  • max-height: max-content
  • max-height: min-content
  • max-height: none
  • max-height: percentage


Values

length
Specifies a fixed height. Negative values are not allowed. See length for possible units.


percentage
A <percentage> relative to the height of the containing block. If the containing block has no height explicitly set then is is treated as none. Negative values are not allowed.


calc()
See css calc function for mode details.


inherit
Takes the same specified value as the property for the element's parent.


none
Default. Clears the max-height value. The height property can have any value.


max-content
The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.


min-content
The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.


fill-available
Fill the entire available space of from the containing block (Height minus horizontal margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.


fit-content
If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.


Examples

Use max-height with any CSS selector to apply it.

CSS

/* Restrict all div elements to a max-height of 10px */
div { max-height: 10px }

max-height property overrides the height of an element.

HTML

<style>
/*Default width. Height is based on the content*/
.without-max-height, .with-max-height {
    width: 100px;
}
/*Max height overrides height*/
.with-max-height {
    background: cyan;
    max-height: 50px;
}
.without-max-height {
	background: red;
}
</style>
<div class="without-max-height">Without Max Height. Height taken from content</div>
<br />
<div class="with-max-height">With Max Height. Content may overflow if it goes beyond height.</div>
<br />
<p><strong>Other elements</strong> will flow overtop of objects that are overflowed from their max-height containers.</p>

View live example

Usage

 CSS max height is well supported across most browsers. A few things to consider while usage:
  • Both max-height & height should not be specified in the same units as one would override the other. The end result would be min(height, max-height).
  • min-height overrides max-height. If min-height supplied is greater than max-height, max-height does not have an impact.
  • max-content, min-content, fit-content, and fill-available are in W3C draft stage and not supported across all browsers.
  • Support for calc is better across browsers. Vendor prefixes may be needed.


Related specifications

Specification Status Related Changes
CSS 2.1 (Section 10.7) W3C Recommendation
CSS Intrinsic & Extrinsic Sizing Module Level 3 Working Draft Adds max-content, min-content, fit-content, and fill-available.

See also

Related articles

Box Model














  • max-height




External resources

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]