CSS min-inline-size property

Previous Page min-block-size
Next Page min-height

Definition and Usage

min-inline-size The attribute specifies the minimum size of the element in the inline direction.

will be applied min-inline-size If the content size in the inline direction is less than the minimum size, then

property value. min-inline-size If the content size in the inline direction is greater than the minimum size, then

The property value does not take effect.Note: writing-mode related CSS properties min-inline-size Defines the inline direction, which affects

properties. For English pages, the block direction is downward, and the inline direction is from left to right. min-inline-size CSS min-height properties are similar to CSS properties and min-width min-inline-size Very similar, but

The property depends on the inline direction.

Instance

Example 1

div {
  min-inline-size: 200px;
}

Try It Yourself

Example 2: Writing Mode

Set the minimum inline size of the <div> element to 200 pixels: writing-mode When the property value is set to vertical-rl, the inline direction changes from lateral to downward, which affects the working of the min-inline-size property:

div {
  min-inline-size: 260px;
  writing-mode: vertical-rl;
}

Try It Yourself

Example 3: min-inline-size vs inline-size

Observe an inline-size for a <div> element with a width of 200px and another min-inline-size Different behaviors of a <div> element with a width of 200px when the content size changes:

#div1 {
  min-inline-size: 200px;
}
#div2 {
  inline-size: 200px;
}

Try It Yourself

CSS Syntax

min-inline-size: auto|length|initial|inherit;

Property Value

Value	Description
auto	Default. The default min-inline-size value of the element.
length	Specify the minimum size using fixed units (such as px, pt, cm, etc.). See:CSS Units.
%	Specify the minimum size using percentages, relative to the parent element's size on the corresponding axis.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

Default Value:	auto
Inheritance:	No
Animation Creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript Syntax:	object.style.minInlineSize="10px"