max-block-size

Definition

The max-block-size property sets the maximum block size of an element, which is the size of the element along its block axis (e.g. height for a vertical element). This property can be used to prevent an element from growing beyond a certain size. If the element's size is smaller than the specified maximum block size, this property has no effect.

Examples

Setting a maximum height for an element:

.box {
  max-block-size: 200px;
}

Setting a maximum height for a table row:

tr {
  max-block-size: 50px;
}

Setting a maximum height for an image:

img {
  max-block-size: 100%;
}

Values

Best Practices

• Use max-block-size judiciously, as it can potentially interfere with the element's layout and affect its responsiveness.
• Combine max-block-size with min-block-size to create a flexible range of block sizes for an element.
• Use relative units like % and em instead of absolute units like px to ensure that the element scales appropriately across different devices.
• Avoid using max-block-size to override the height of an element that needs to accommodate its content. Instead, consider using min-height or height to allow the element to grow as needed.
• Test your code in multiple browsers to ensure cross-browser compatibility, as this property is not yet widely supported.

Browser Compatibility