PLAY CSS
jaen

Box

min-inline-size

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

Syntax

<'min-width'>

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: 5em;
  min-inline-size: 14em;
}

Controls

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

About

Writing the value

  • A length such as 14em: never smaller than that.
  • auto: the initial value. On an ordinary block element it sets no limit (the same as 0). On flex and grid items it can keep the item from shrinking below its content (as min-width does).
  • min-content, max-content and fit-content: use a size taken from the content as the limit. For min-content in English, that is the length of the longest word.

As on the inline-size page, the preview box is vertical (writing-mode: vertical-rl), so min-inline-size is a lower limit on its height. A helper declaration makes it short with inline-size: 5em, but the limit wins. Remove the helper writing-mode from the code to make it horizontal, and it limits the width instead.

In vertical text, a % is a share of the parent's height, and it has no effect unless that height is set, so this page does not offer it.

When to use it

To set the minimum length of buttons or inputs with one declaration that works in both vertical and horizontal text.

Watch out

  • It sets the same thing as min-width in horizontal text and min-height in vertical text, so when both are written, the later one wins.
  • When it is larger than max-inline-size, min-inline-size wins.
  • Works in all major browsers.

References

MDN Web Docsmin-inline-sizeSpecificationCSS Logical Properties and Values Level 1Can I usemin-inline-size

Comments

PLAY CSS