CSS max-inline-size property specifies the maximum horizontal or vertical size of an element’s block, determined by its writing mode and equivalent to either max-height and max-width based on the writing mode value.
The max-inline-size property sets the maximum width for horizontal writing modes and the maximum height for vertical writing modes, respectively. A companion property, max-block-size defines the other dimension.
Possible Values
The max-inline-size property accepts the same values as max-height and max-width.
Applies To
Same as width and height.
Syntax
<length> Values
max-inline-size: 300px;
max-inline-size: 25em;
<percentage> Values
max-inline-size: 40%;
Keyword Values
max-inline-size: none;
max-inline-size: max-content;
max-inline-size: min-content;
max-inline-size: fit-content;
max-inline-size: fit-content(20em);
CSS max-inline-size – <length> Value
The following example demonstrates the max-inline-size: 300px property sets the maximum width of the element to the 300px −
<html><head><style>
div {
background-color: greenyellow;
border: 3px solid red;
max-inline-size: 300px;
}
</style></head><body><div><h2>Tutorialspoint</h2><h4>CSS max-inline-size: 300px</h4></div></body></html>CSS max-inline-size – <percentage> Value
The following example demonstrates the max-inline-size: 80% property sets the maximum width of the element to the 80% −
<html><head><style>
div {
background-color: greenyellow;
border: 3px solid red;
max-inline-size: 80%;
}
</style></head><body><div><h2>Tutorialspoint</h2><h4>CSS max-inline-size: 80%</h4><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div></body></html>CSS max-inline-size – <max-content> Value
The following example demonstrates the max-inline-size: max-content property allowed the width of the div element to expand horizontally to fit the content −
<html><head><style>
div {
background-color: greenyellow;
border: 3px solid red;
max-inline-size: max-content;
}
</style></head><body><div><h2>Tutorialspoint</h2><h4>CSS max-inline-size: max-content</h4></div></body></html>CSS max-inline-size – With Vertical Text
The following example demonstrates the max-inline-size property with writing-modes to display text in vertical direction −
<html><head><style>
div {
background-color: greenyellow;
border: 2px solid blue;
margin: 10px;
padding: 5px;
block-size: 100%;
max-inline-size: 100px;
writing-mode: vertical-rl;
}
</style></head><body><div ><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div></body></html>
Leave a Reply