max-height
Published Jul 13, 2021Updated Sep 3, 2021
Contribute to Docs
Defines the maximum height of an element.
Syntax
max-height: <value>;
where <value>
can be one of the following:
- Length values:
200px
- Percentage values:
15%
- Keyword values:
none
,max-content
,min-content
,fit-content
Note: In the case that box-sizing
is set to border-box
, the max-height
of the element includes the content, padding and border. max-height
overrides the height
property. min-height
overrides max-height
.
Example 1
Set the max-height
of the .box
element to be 250px
:
.box {border: 2px solid black;max-height: 250px;}
Example 2
Set the max-height
of the .box
element to be 50%
:
.box {border: 2px solid black;max-height: 50%;}
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours