CSS max-inline-size Property
Last Updated :
07 Feb, 2024
The CSS max-inline-size Property sets the maximum width or height of an element depending on its writing mode. It’s particularly useful for controlling the size of inline elements like text or images within a container.
For horizontal writing modes (like left-to-right languages), it controls the maximum width, while for vertical writing modes, it controls the maximum height. This property helps maintain layout consistency and prevents content overflow.
Syntax
max-inline-size: auto | value | initial |inherit;
Property values
| Property Value |
Descriptions |
<length> |
Specifies a fixed length (e.g., pixels or em). |
<percentage> |
Specifies a percentage of the containing block’s size. |
max-content |
Allows the element to expand to its maximum content size. |
min-content |
Constrains the element to its minimum content size. |
fit-content |
Resizes the element to fit its content within specified constraints. |
fill-available |
Fills the available space within the containing block. |
auto |
It lets the browser determine the maximum size automatically. |
Example 1:Â Below examples illustrate the max-inline-size property in CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS max-inline-size Property</title>
<style>
h1 {
color: green;
}
div {
background-color: lightblue;
border: 2px solid green;
max-inline-size: 100px;
display: inline-block;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<p>
GeeksforGeeks is an online
study platform for the geeks.
</p>
</div>
</body>
</html>
|
Output:
 Example 2: Another implementation of the CSS max-inline-size Property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS | max-inline-size Property</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
div {
background-color: green;
width: 200px;
height: 20px;
}
.one {
position: relative;
max-inline-size: auto;
background-color: cyan;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
<b>CSS | max-inline-size Property</b>
<br><br>
<div>
<p class="one">
A Computer Science Portal for Geeks
</p>
</div>
</body>
</html>
|
Output:
Supported Browsers
The browsers supported by max-inline-size property are listed below:
- Firefox 41
- Google Chrome 57
- Edge 79
- Opera 44
- Safari 12.1
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...