Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS max-block-size Property

Posted in CSS Tutorial
Updated on Oct 07, 2024
By Mari Selvan
👁️ 10 - Views
⏳ 4 mins
💬 1 Comment
CSS max-block-size Property

Photo Credit to CodeToFun

🙋 Introduction

The max-block-size property in CSS is used to define the maximum size of a block-level element along the block axis.

This property is useful for controlling the maximum height or width of an element in a block formatting context, depending on the writing mode of the document.

By specifying a maximum size, you can prevent elements from growing beyond a certain point, which helps maintain the layout and design consistency across different devices and screen sizes.

💡 Syntax

The syntax for the max-block-size property is as follows:

Syntax
Copied
Copy To Clipboard
element {
  max-block-size: length | max-content | min-content | fit-content | initial | inherit;
}

🎛️ Default Value

The default value of the max-block-size property is none. This means that without explicit styling, the element has no maximum size constraint along the block axis and can grow as needed based on its content and other styling properties.

🏠 Property Values

ValueDescription
lengthDefines a fixed maximum size for the element. For example, max-block-size: 300px; will set the maximum height to 300 pixels.
max-contentThe element will be as tall as its content requires, up to the maximum size.
min-contentThe element will be as tall as the smallest possible size needed to fit its content.
fit-contentThe element will grow as needed to fit its content but will not exceed the specified maximum size.
initialResets the property to its default value, which is none.
inheritThe element inherits the max-block-size value from its parent element.

📄 Example

In this example, we'll set the maximum height of a div element to 400 pixels.

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-block-size Example</title>
  <style>
    .box {
      max-block-size: 400px;
      overflow: auto;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <h1>Block Element with Maximum Block Size</h1>
  <div class="box">
    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.
  </div>
</body>
</html>

In this example, the div with the class box will have a maximum height of 400 pixels. If the content exceeds this height, it will become scrollable due to the overflow: auto property.

🖥️ Browser Compatibility

The max-block-size property is supported in most modern browsers, but as it is a relatively recent addition to CSS, its compatibility might vary. It is advisable to test the property across different browsers and devices to ensure that it performs as expected.

🎉 Conclusion

The max-block-size property is a useful tool for controlling the maximum size of block-level elements along the block axis.

By setting appropriate maximum sizes, you can ensure that your elements fit well within the design and layout constraints of your website. Experiment with different values to see how this property can help you achieve a responsive and well-structured layout.

👨‍💻 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