CSS min-inline-size property specifies the minimum horizontal or vertical size of an element’s block, determined by its writing mode and equivalent to either min-height and min-width based on the writing mode value.
Possible Values
The min-inline-size property accepts the same values as min-height and min-width.
Applies To
Same as width and height.
Syntax
<length> Values
min-inline-size: 100px;
min-inline-size: 5em;
<percentage> Values
min-inline-size: 10%;
Keyword Values
min-inline-size: max-content;
min-inline-size: min-content;
min-inline-size: fit-content;
min-inline-size: fit-content(20em);
The min-inline-size property sets the minimum width for horizontal writing modes and the minimum height for vertical writing modes, respectively. A companion property, min-block-size defines the other dimension.
CSS min-inline-size – <length> Value
The following example demonstrates the min-inline-size: 200px property sets the minimum width of the inline element to the 200px −
<html><head><style>
.box {
background-color: greenyellow;
border: 3px solid red;
display: inline-block;
min-inline-size: 200px;
}
</style></head><body><p class="box">CSS min-inline-size</p></body></html>CSS min-inline-size – <percentage> Value
The following example demonstrates the min-inline-size: 30% property sets the minimum width of the inline element to the 30% −
<html><head><style>
.box {
background-color: greenyellow;
border: 3px solid red;
display: inline-block;
min-inline-size: 30%;
}
</style></head><body><p class="box">CSS min-inline-size</p></body></html>CSS min-inline-size – max-content Value
The following example demonstrates the min-inline-size: max-content property allows the inline element to expand horizontally to fit its content −
<html><head><style>
.box {
background-color: greenyellow;
border: 3px solid red;
display: inline-block;
min-inline-size: max-content;
}
</style></head><body><p class="box">CSS min-inline-size</p></body></html>CSS min-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;
min-inline-size: 150px;
writing-mode: vertical-rl;
}
</style></head><body><div><h3>CSS min-inline-size with writing-mode: vertical-rl.</h3></div></body></html>
Leave a Reply