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

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