The max-block-size property in CSS specifies the maximum size an element can have along the block direction. In most horizontal writing modes, it behaves similarly to the max-height property.
- Limits the maximum size of an element along the block axis.
- Behaves like max-height in horizontal writing modes and adapts to different writing directions.
- Supports length values, percentages, and keywords for flexible layouts.
Syntax:
max-block-size: length | percentage | auto | none | min-content |
max-content | fit-content | inherit | initial | unset;
Property values
- length: It sets a fixed value defined in px, cm, pt etc. Negative values are allowed. Its default value is 0px.
- percentage (%): It is the same as length but the size is set in term of percentage of the window size.
- auto: It is used when it is desired that the browser determines the block-size.
- none: It is used when you don't want to limit on the size of the box.
- max-content: It is used when you preferred max-width on the size of the box.
- min-content: It is used when you preferred min-width on the size of the box.
- fit-content: It is used when you preferred exact-width on the size of the box.
- initial: It is used to set the value of the max-block-size property to its default value.
- inherit: It is used when it is desired that the element inherits the max-block-size property of its parent as its own.
- unset: It is used unset the default max-block-size.
Examples of max-block-size property in CSS
Here are some example discussed:
Example 1: Demonstrates the max-block-size property by limiting the maximum block size of an element and hiding content that exceeds the specified size.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS max-block-size Property</title>
<!--Driver Code Ends-->
<style>
body {
background-color: #e6e6e6;
}
h1 {
color: green;
}
.container {
width: 200px;
height: 30px;
background-color: aqua;
text-align: center;
margin-left: 35px;
margin-top: 30px;
position: relative;
}
.bar {
background-color: green;
height: 20px;
width: 200px;
position: absolute;
top: 10px;
left: 0;
}
.text {
position: relative;
z-index: 1;
font-size: 18px;
line-height: 20px;
}
.bottom-text {
text-align: center;
width: 200px;
margin-left: 35px;
font-size: 18px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS | max-block-size Property</h2>
<div class="container">
<div class="bar"></div>
<div class="text">A Computer Science</div>
</div>
<div class="bottom-text">Portal for Geeks</div>
</body>
</html>
<!--Driver Code Ends-->
Example 2: Use of the max-block-size property to limit the maximum block size of an element while allowing its content to wrap within the specified size.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS max-block-size Property</title>
<!--Driver Code Ends-->
<style>
body {
background-color: #e6e6e6;
}
h1 {
color: green;
}
div {
background-color: aqua;
max-block-size: 40px;
width: 200px;
overflow: hidden;
text-align: center;
font-size: 18px;
line-height: 20px;
margin-left: 35px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS | max-block-size Property</h2>
<div>
A Computer Science<br>
Portal for Geeks
</div>
</body>
</html>
<!--Driver Code Ends-->