1. css
  2. /properties
  3. /min-inline-size

min-inline-size

Definition

The min-inline-size property sets the minimum width or height of an element depending on its writing mode. In horizontal writing modes, such as left-to-right, this property sets the minimum width of an element. In vertical writing modes, such as top-to-bottom, it sets the minimum height. This property is often used with inline-block and inline-flex elements to ensure that they have a minimum size even if they contain no content.

Examples

Setting a minimum width for an inline element:

span {
  min-inline-size: 100px;
}

Setting a minimum height for an inline-flex element:

div {
  display: inline-flex;
  min-inline-size: 50px;
}

Setting a minimum width for an element in vertical writing mode:

p {
  writing-mode: vertical-rl;
  min-inline-size: 200px;
}

Values

ValueDescription
<length>Specifies the minimum width or height in pixels or other absolute or relative units.
<percentage>Specifies the minimum width or height as a percentage of the containing block's width or height.
max-contentSets the minimum width or height to the intrinsic width or height of the element's content, whichever is larger.
min-contentSets the minimum width or height to the intrinsic width or height of the element's content, whichever is smaller.
autoDefault value. The element's width or height is determined by its content.
inheritInherits the min-inline-size property from the parent element.
initialSets the min-inline-size property to its default value.
unsetInherits the min-inline-size property from the parent element, or sets it to its default value if there is no parent.

Best Practices

  • Use min-inline-size with inline-block and inline-flex elements to ensure that they have a minimum size even if they contain no content.
  • Use relative units like % and em instead of absolute units like px to ensure that the element scales appropriately across different devices.
  • Consider using min-width or min-height instead of min-inline-size for block-level elements, as they do not have an inline dimension.
  • Use max-content or min-content to set the minimum width or height to the intrinsic size of the element's content, whichever is larger or smaller, respectively.
  • Test your code in multiple browsers to ensure cross-browser compatibility.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes