PLAY CSS
jaen

Box

inline-size

inline-size sets the size of an element in the direction its text runs. In horizontal text it works like width, and in vertical text like height.

Syntax

auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)

Preview

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize

Code

.box {
  writing-mode: vertical-rl;
  inline-size: 120px;
}

Controls

inline-size120px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

About

Writing the value

  • A length such as 120px: uses that size.
  • auto: the initial value. Decided by the surroundings. A normal block element in horizontal text stretches to the full width of its parent.
  • min-content: the size when every possible line break is taken. For English, that is the length of the longest word.
  • max-content: the size when no line ever wraps.
  • fit-content: fits the content without exceeding what fits in the parent.

The preview box uses vertical text (writing-mode: vertical-rl), so the characters run from top to bottom and inline-size sets the height of the box. Changing the value changes the length of each column, and text that does not fit wraps to the next column on the left. Remove the helper writing-mode from the code to switch to horizontal text, where inline-size sets the width.

When to use it

Use it on pages that switch between vertical and horizontal text, to size elements by the direction of the text with a single declaration. It keeps meaning "the length of a line" in vertical text, so changing writing-mode is enough to get the right size for the direction.

Watch out

  • It sets the same thing as width in horizontal text and height in vertical text, so if you write both, the later one wins.
  • % is a share of the parent's size in the same direction (the height, in vertical text). In vertical text, it behaves like auto when the parent's height is not fixed.
  • For the minimum and maximum, use min-inline-size and max-inline-size, which work like min-width and max-width.

References

MDN Web Docsinline-sizeSpecificationCSS Logical Properties and Values Level 1Can I useinline-size

Comments

PLAY CSS