Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
Max Height in CSS

Max Height in CSS

By Riya Verma
5 mins read
Last updated: 20 Dec 2022
145 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

The max-height property specifies the maximum height of an HTML element.

  • The height's value cannot be larger than the height's maximum value.
  • The content will overflow if it exceeds the maximum height.
  • The max height has no effect if the content's height is smaller than the maximum.
  • The max height CSS property applies to block level and replaced elements.

NOTE :

  • No matter where we place the max height property in our declaration, it overrides the height property.
  • The min-height property overrides the max height property.

Syntax for Max Height in CSS

The CSS max height property accepts keyword values such as none, max-content, min-content, etc. It supports numeric values such as length in px, em, and percentage.

In the further sections of the article, we will discuss the values that the max-height property supports in more detail .

Property Values of Max Height in CSS

ValueDescriptionSyntax
It defines the maximum height in px, cm, etc.max-height: example: max-height:100px;
It specifies the maximum height in percent of the containing block.max-height: example : max-height:10%;
noneIt specifies that there's no limit on the height of the box.max-height;
max-contentThe max-content value indicates the content's intrinsic maximum-height. The max-content height represents the height of a paragraph if each paragraph is one long sentence with no soft line breaks.max-height;
min-contentA min-content sizing keyword specifies the content's intrinsic minimum height. The min-content height represents the tallest a box can get by breaking all lines at all potential breakpoints.max-height;
fit-contentThe fit-content value adjusts the height according to this formula: min(maximum size, max(minimum size, argument))max-height: fit-content(20em);

Note: The fit-content value acts the same as that of max-content.

Examples of Max Height in CSS

Setting max-height using Percentage and Keyword Values

In this example, we'll set the maximum element height using the various values supported by the max height css property.

HTML:

CSS:

Output:

We can use the CSS overflow property to handle the overflowing content. overflow:auto; adds a scroll-bar if the content overflows.

PROPERTY MAX HEIGHT

Browser Support

The following browsers support the CSS max-height property:

BrowserVersion
Google Chrome1.0
Safari1.0
Mozilla Firefox1.0
Microsoft Edge12.0
Opera4
Chrome Android18
Firefox for Android4
Opera Android10.1
Safari on iOS1
Samsung Internet1.0
WebView Android4.4

Conclusion

  • The max height property in CSS defines the maximum height of an element.
  • The content will overflow if it exceeds the maximum height.
  • The max height property doesn't work if the content is smaller than the maximum-height.
  • The CSS max height property applies to block level and replaced elements.
  • The max height CSS property takes keyword values such as none, max-content, min-content, etc.
  • It supports numeric values such as length in px, em, and percentage.