CSS min-inline-size Property
Description
The min-inline-size
CSS property specifies the minimum size of an element along its inline axis, which is typically the horizontal axis in most cases. It ensures that the element will not become smaller than the specified value, even if its content or other factors would naturally make it smaller. This property is particularly useful for maintaining consistent spacing and layout in responsive design, as it allows designers to set a minimum width for inline elements like text containers or flex items, preventing them from collapsing too much and potentially causing readability or layout issues.
- Initial value
- 0
- Applies to
- same as width and height
- Inherited
- no
- Computed value
- same as min-width and min-height
- Animatable
- a length, percentage or calc();
- JavaScript syntax
- object.style.minInlineSize
Interactive Demo
Syntax
min-inline-size: <min-width>
Values
- <min-width>Defines the min-block-size as an value or percentage.
Example
<p class="exampleText">Example text</p>
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 5%;
min-inline-size: 200px;
}
Browser Support
The following table will show you the current browser support for the CSS min-inline-size
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
79 | 57 | 41 | 44 | 12.1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
57 | 41 | 43 | 12.2 | 7 | 57 |
Last updated by CSSPortal on: 2nd January 2024