CSS min-inline-size property

Description

CSS min-inline-size specifies the minimum inline-size of an element.

  • It behaves like min-height for the horizontal-tb writing mode.

  • It behaves like min-width for the vertical-* writing-mode.

Change the direction of flow of text.

horizontal-tb vertical-lr vertical-rl

Syntax

min-inline-size : none | min-content | max-content | +ve length | +ve percentage | auto

Property values

noneDefault

No limit of inline-size is applied to an element.

min-inline-size: none;

min-content

min-content value specifies that the minimum inline-size of element must be equal to or greater than the largest minimum inline-size of some descendant item.

min-inline-size: min-content;

max-content

max-content value represents that the minimum inline-size of element must be equal to or greater than the largest maximum inline-size of some descendant item.

min-inline-size: max-content;

+ve length

The inline-size of element should be at least 300px.

min-inline-size: 300px;

+ve percentage

The inline-size of element should be at least 30% of the parent box.

min-inline-size: 30%;

auto

auto value means the inline-size will be changed automatically according to the content.

min-inline-size: auto;

Applicable to

It applies to all elements

From web4college, the free CSS digger

#CSS digger
Was this article helpful?

 

This is the first child element.

This is the second child element.

▾
×

Ctrl+D