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

max-inline-size

Definition

The max-inline-size property sets the maximum width or height that an element can have, depending on the writing mode. It is a shorthand property that combines max-width and max-height.

In horizontal-tb writing mode (the default for most languages), max-inline-size sets the maximum width of an element. In vertical-rl and vertical-lr writing modes, it sets the maximum height of an element.

Examples

Setting a maximum width for a div element:

div {
  max-inline-size: 400px;
}

Setting a maximum height for an image element:

img {
  max-inline-size: 100%;
  height: auto;
}

Setting a maximum width for a table element:

table {
  max-inline-size: 800px;
}

Values

ValueDescription
noneDefault value. The element can be sized as large as necessary
<length>Specifies the maximum width or height in pixels, or other absolute or relative units
<percentage>Specifies the maximum width or height as a percentage of the containing block

Best Practices

  • Use max-inline-size to set a maximum width or height for an element, depending on the writing mode.
  • Use relative units like % and em instead of absolute units like px to ensure that the element scales appropriately across different devices.
  • Consider setting a minimum width or height with min-inline-size to ensure that the element does not become too small.
  • Avoid using max-inline-size on elements that need to grow dynamically to fit their content, such as text blocks. Use width or height instead, or consider setting a minimum width or height with min-width or min-height.
  • Test your code in multiple browsers to ensure cross-browser compatibility.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes