demo · v150
Logical properties
fit-content() works with logical sizing properties — inline-size, block-size, min-inline-size, max-block-size — not just physical width and height. That means the "shrink-wrap with a cap" behaviour is direction-aware: in vertical writing modes the cap applies to the block axis; in RTL the inline start changes side but the cap still clips correctly.
inline-size: fit-content(cap) is the logical equivalent of width: fit-content(cap) in horizontal writing modes. In writing-mode: vertical-rl, inline-size maps to the height. Three live boxes below show the same CSS property inline-size: fit-content() behaving correctly across LTR, RTL, and vertical contexts.
Cap size:
180px
Content:
LTR — horizontal (default)
inline-size: fit-content(cap)
= "width" in this writing mode
Hello, logical world
measured: —
RTL — horizontal (direction: rtl)
inline-size: fit-content(cap)
= "width", inline starts at right
Hello, logical world
measured: —
Vertical RL — writing-mode: vertical-rl
inline-size: fit-content(cap)
= "height" in vertical mode
Hello, logical world
measured: —
| CSS property | LTR horizontal | vertical-rl / vertical-lr | RTL horizontal |
|---|---|---|---|
inline-size: fit-content(N) |
= width ≤ N | = height ≤ N | = width ≤ N (starts at right) |
block-size: fit-content(N) |
= height ≤ N | = width ≤ N | = height ≤ N |
min-inline-size: fit-content(N) |
= min-width ≤ N | = min-height ≤ N | = min-width ≤ N |
max-inline-size: fit-content(N) |
= max-width; content capped at N | = max-height; content capped at N | = max-width; content capped at N |
/* Physical property — works but loses direction awareness */
.tag { width: fit-content(200px); }
/* Logical property — adapts to writing-mode and direction */
.tag { inline-size: fit-content(200px); }
/* In LTR: equivalent to width ≤ 200px
In vertical-rl: equivalent to height ≤ 200px
In RTL: equivalent to width ≤ 200px, inline start at right */
/* Block axis: fit-content(N) on block-size */
.card {
block-size: fit-content(300px); /* height ≤ 300px in horizontal modes */
overflow: hidden; /* clip overflow if content is taller */
}
/* Combining min/max with logical fit-content */
.tooltip {
min-inline-size: 80px; /* never narrower than 80px */
inline-size: fit-content(240px); /* shrink-wrap, cap at 240px */
}