CSS max-inline-size Property
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 >w3wiki</ h1 > < div > < p > w3wiki is an online study platform for the Beginner. </ 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 >w3wiki</ h1 > < b >CSS | max-inline-size Property</ b > < br >< br > < div > < p class = "one" > A Computer Science Portal for Beginner </ 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
Contact Us