CSS Inline-Size A Versatile Property for Responsive Design

Introduction

The inline-size CSS property defines the horizontal or vertical size of an element, depending on the writing mode. It’s similar to the width or height properties but adapts based on the writing-mode. Introduced in September 2021, inline-size is widely supported and essential for creating responsive layouts.

Definition

The inline-size property sets the size of an element along the inline axis, which can be horizontal or vertical depending on the writing-mode. If the writing mode is vertical (vertical-rl or vertical-lr), inline-size corresponds to the height. If it’s horizontal (horizontal-tb), inline-size corresponds to the width.

Relationship to Writing Mode

The inline-size property works with the writing-mode property, which determines text direction. In vertical modes (vertical-rl or vertical-lr), inline-size sets the height. In horizontal mode (horizontal-tb), it sets the width. This relationship makes inline-size adaptable for different text directions.

Syntax

/* <length> values */
inline-size: 300px;
inline-size: 25em;
inline-size: anchor-size(width);
inline-size: anchor-size(--myAnchor inline);

/* <percentage> values */
inline-size: 75%;

/* Keyword values */
inline-size: max-content;
inline-size: min-content;
inline-size: fit-content;
inline-size: fit-content(20em);
inline-size: auto;

/* Global values */
inline-size: inherit;
inline-size: initial;
inline-size: revert;
inline-size: revert-layer;
inline-size: unset;

Values

Length Values

• Examples: 300px, 25em
• Description: Fixed sizes using units like pixels (px) or ems (em).

Percentage Values

• Examples: 75%
• Description: Size relative to the containing block.

Keyword Values

• Examples: max-content, min-content, fit-content, auto
• Description: Predefined keywords for specific purposes:
  • auto: Browser calculates the size.
  • max-content: Size based on the largest content.
  • min-content: Size based on the smallest content.
  • fit-content: Size based on available space, with an optional maximum.

Global Values

• Examples: inherit, initial, revert, unset
• Description: Control inheritance and reset values:
  • inherit: Inherits from parent.
  • initial: Uses the initial value.
  • revert: Reverts to default value.
  • unset: Resets to natural value.

Formal Definition

Formal Syntax

inline-size = <width>

<width> =
  auto |
  <length-percentage [0,∞]> |
  min-content |
  max-content |
  fit-content( <length-percentage [0,∞]> ) |
  <calc-size()> |
  <anchor-size()>

<length-percentage> =
  <length> |
  <percentage>

<calc-size()> =
  calc-size( <calc-size-basis> , <calc-sum> )

<anchor-size()> =
  anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )

<calc-size-basis> =
  <intrinsic-size-keyword> |
  <calc-size()> |
  any |
  <calc-sum>

<anchor-element> =
  <dashed-ident>

<anchor-size> =
  width |
  height |
  block |
  inline |
  self-block |
  self-inline

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
  <number> |
  <dimension> |
  <percentage> |
  <calc-keyword> |
  ( <calc-sum> )

<calc-keyword> =
  e |
  pi |
  infinity |
  -infinity |
  NaN

Examples

Setting Inline Size in Pixels

HTML:

<p class="exampleText">Example text</p>

CSS:

.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  inline-size: 110px;
}

Setting Inline Size with Percentage

HTML:

<p class="exampleText">Example text</p>

CSS:

.exampleText {
  writing-mode: horizontal-tb;
  background-color: lightblue;
  inline-size: 50%;
}

Setting Inline Size with fit-content

HTML:

<p class="exampleText">Example text</p>

CSS:

.exampleText {
  writing-mode: horizontal-tb;
  background-color: lightgreen;
  inline-size: fit-content(20em);
}

Specifications

Browser Compatibility

• Google Chrome: Supported since version 57.
• Microsoft Edge: Supported since version 79.
• Mozilla Firefox: Supported since version 41.
• Opera: Supported since version 44.
• Safari: Supported since version 12.1.

See Also

• The mapped physical properties: width and height
• writing-mode

References

• MDN Web Docs - inline-size