Options include lengths, percentages, and keywords like auto, min-content, and max-content.
Introduction
The CSS min-inline-size
property sets the minimum size of an element along its inline axis, depending on the writing mode. This property is particularly useful for creating flexible and responsive designs, especially when dealing with different text orientations. The min-inline-size
property has been widely supported across major browsers since September 2021.
What is min-inline-size?
The min-inline-size
CSS property defines the minimum size of an element along its inline axis, depending on its writing mode. In horizontal writing modes, min-inline-size
is equivalent to the min-width
property. In vertical writing modes, it corresponds to the min-height
property. This adaptability makes min-inline-size
a versatile tool for ensuring that elements maintain a minimum size, regardless of the text direction.
Syntax
The min-inline-size
property in CSS allows you to specify the minimum size of an element along its inline axis. The syntax for this property is straightforward and supports a variety of values, including lengths, percentages, and keywords.
Values
The min-inline-size
property accepts a variety of values, providing flexibility for defining the minimum size of an element along its inline axis.
- <length>: Specifies a fixed value for the minimum size, using units such as pixels (px), centimeters (cm), or points (pt).
- <percentage>: Sets the minimum size as a percentage of the containing block’s size.
- auto: Allows the browser to determine the minimum size based on the content and layout constraints.
- none: Specifies that there is no minimum size constraint.
- min-content: Sets the minimum size to the smallest possible size that can contain the content.
- max-content: Sets the minimum size to the largest possible size that can contain the content.
- fit-content: Allows the size to be determined by the content size, with the option to specify a fallback length.
- inherit: Inherits the
min-inline-size
value from the parent element. - initial: Resets the property to its default value.
- unset: Resets the property to its natural value.
- revert: Resets the property to the browser’s default value.
- revert-layer: Resets the property to the value that would have been applied if the current layer of cascade had not been applied.
Formal Definition
The min-inline-size
property is formally defined to set the minimum size of an element along its inline axis, depending on the writing mode.
Property | Value |
---|---|
Initial Value | 0 |
Applies to | Same as [width ]WebsiteUrl and [height ]WebsiteUrl |
Inherited | No |
Percentages | Relative to the inline-size of the containing block |
Computed Value | Same as [min-width ]WebsiteUrl and [min-height ]WebsiteUrl |
Animation Type | A [length]WebsiteUrl, [percentage]WebsiteUrl, or calc() |
Formal Syntax
Examples
Setting Minimum Inline Size for Horizontal Text
HTML
CSS
Setting Minimum Inline Size for Vertical Text
HTML
CSS
Using Percentages
HTML
CSS
Using Keywords
HTML
CSS
Browser Compatibility
The min-inline-size
property is widely supported across modern web browsers:
- Firefox: Supported since version 41+
- Google Chrome: Supported since version 57+
- Edge: Supported since version 79+
- Opera: Supported since version 44+
- Safari: Supported since version 12.1+
See Also
- [
min-width
]WebsiteUrl: Sets the minimum width of an element. - [
min-height
]WebsiteUrl: Sets the minimum height of an element. - [
writing-mode
]WebsiteUrl: Defines the writing mode of an element.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.