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

min-inline-size: 200px;
writing-mode: horizontal-tb;

min-inline-size: 200px;
writing-mode: vertical-rl;

min-inline-size: 20px;
writing-mode: horizontal-tb;

min-inline-size: 75%;
writing-mode: vertical-lr;

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