Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS max-height Property

Posted in CSS Tutorial
Updated on Oct 07, 2024
By Mari Selvan
πŸ‘οΈ 15 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
CSS max-height Property

Photo Credit to CodeToFun

πŸ™‹ Introduction

The max-height property in CSS is used to specify the maximum height of an element.

This property is particularly useful when you want to restrict the height of an element but still allow it to grow if necessary, depending on its content. It's often used in conjunction with other properties such as overflow to handle content that exceeds the maximum height.

πŸ’‘ Syntax

The syntax for the max-height property is as follows:

Syntax
Copied
Copy To Clipboard
element {
  max-height: value;
}

Here, value can be a length (such as px, em, rem, vh, etc.), a percentage, or the keyword none.

πŸŽ›οΈ Default Value

The default value of the max-height property is none, which means there is no maximum height restriction on the element.

🏠 Property Values

ValueDescription
lengthSpecifies a fixed height, such as 200px, 10em, 50vh.
percentageSpecifies a height relative to the height of the containing element, such as 50%.
noneNo maximum height is applied, meaning the element can grow indefinitely.

πŸ“„ Example

In this example, we’ll restrict the maximum height of a div element to 200 pixels. If the content exceeds this height, it will be clipped or scrollable depending on the overflow property.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS max-height Example</title>
  <style>
    .container {
      max-height: 200px;
      overflow: auto; /* Adds a scrollbar if content exceeds max-height */
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Container with Max Height</h1>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</body>
</html>

πŸ–₯️ Browser Compatibility

The max-height property is well-supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. As with any CSS feature, it’s always a good practice to test across different browsers and devices to ensure consistent behavior.

πŸŽ‰ Conclusion

The max-height property is a versatile tool for controlling the height of elements on your web page. By setting a maximum height, you can manage the layout of your content more effectively, especially in dynamic or responsive designs.

Use this property to ensure your web elements behave as expected and contribute to a better user experience.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy