CSS min-inline-size Property

❮ Previous Complete CSS Reference Next ❯

Example

Set the minimum size of a <div> element to 200 pixels in the inline direction:

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

More "Try it Yourself" examples below.

Definition and Usage

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

If the content is smaller than the minimum size in inline direction, the min-inline-size property value will be applied.

If the content is larger than the minimum size in inline direction, the min-inline-size property value has no effect.

Note: The related CSS property writing-mode defines inline direction, and this affects the result of the min-inline-size property. For pages in English, block direction is downward and inline direction is left to right.

The CSS min-inline-size property is very similar to CSS properties min-height and min-width, but the min-inline-size property is dependent on inline direction.

Show demo ❯

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.minInlineSize="10px" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
min-inline-size	57.0	79.0	41.0	12.1	44.0

CSS Syntax

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

Property Values

Value	Description	Demo
auto	Default. The element's default min-inline-size value.	Demo ❯
length	Specifies min-inline-size in px, pt, cm, etc. Read about length units	Demo ❯
%	Specifies min-inline-size in percent relative to size of parent element on the corresponding axis.	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Writing mode

With the writing-mode property value of a <div> element set to vertical-rl, the inline direction is changed from sideways to downwards, and this affects how the min-inline-size property work:

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

Try it Yourself »

Min-inline-size vs Inline-size

See how one div element with inline-size 200px, and another div with min-inline-size 200px, react differently with changing content size:

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

Try it Yourself »

CSS inline-size property: CSS Inline-size property

CSS max-inline-size property: CSS Max-inline-size property

CSS min-height property: CSS Min-height property

CSS min-width property: CSS Min-width property

CSS writing-mode property: CSS Writing-mode property