CSS inline-size

The inline-size property sets the size of an element in the inline direction. In horizontal writing modes it behaves like width. In vertical writing modes it maps to the vertical inline direction.

Syntax

inline-size: auto;
inline-size: 20rem;
inline-size: 50%;
inline-size: max-content;

Example

.card { inline-size: min(100%, 28rem); }

Result:

This card has a logical inline size.

Why it matters

Logical properties are useful for international layouts because they follow writing mode. Use inline-size when you mean the size along the text flow, not necessarily physical width.