The CSS min-inline-size property sets the minimum inline size of an element based on the writing direction, helping maintain layout consistency by controlling the minimum width or height logically instead of physically.
- In horizontal writing mode, min-inline-size is equivalent to minimum width (min-width).
- In vertical writing mode, it behaves like minimum height (min-height).
Syntax:
min-inline-size: length | percentage | auto | none | min-content | max-content | fit-content | inherit | initial | unset;
Property values:
The min-inline-size property accepts a variety of values to control the minimum inline size of an element, allowing fixed, relative, or automatic sizing based on content or parent elements.
- 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 min-inline-size property to its default value.
- inherit: It is used when it is desired that the element inherits the min-inline-size property of its parent as its own.
- unset: It is used unset the default min-inline-size.
Examples of CSS min-inline-size Property
The following examples illustrate different uses of the CSS min-inline-size property to control the minimum inline size of elements.
Example 1:
- The min-inline-size property sets the minimum width along the inline direction (horizontal in ltr, vertical in writing-mode: vertical-rl) for the <p> element.
- Combined with writing-mode: vertical-rl, it ensures the text block does not shrink below 150px vertically, while background-color: cyan highlights the area.
Example 2:
