CSS max-block-size property

Description

CSS max-block-size specifies the maximum block-size of an element.

When the content overflows the block-size, it adds a vertical scroll bar to the element.

  • It behaves like max-width for the horizontal-tb writing mode.

  • It behaves like max-height for the vertical-* writing-mode.

Change the direction of flow of text.

horizontal-tb vertical-lr vertical-rl

Syntax

min-block-size : none | min-content | max-content | +ve length | +ve percentage | auto

Property values

noneDefault

No limit of block-size is applied to an element.

max-block-size: none;

min-content

min-content value specifies the largest minimum block-size of some descendant item.

The block-size of the current element will be equal to the descendant element that has smallest block-size.

max-block-size: min-content;

max-content

max-content value represents that the largest maximum block-size of some descendant item.

The block-size of the current element will be equal to the descendant element that has largest block-size.

max-block-size: max-content;

length

length value specifies the maximum block-size of the element.

30px value means the block-size of an element can't exceed 30px no matter how much content is inside this element.

max-block-size: 30px;

percentage

percentage value means the block-size of current box can not exceed the percentage value of the parent box.

30% value means the block-size of element must not be greater than 30% block-size of the parent element.

max-block-size: 30%;

auto

auto value means the block-size will be changed automatically according to the content.

max-block-size: auto;

Applicable to

It applies to all elements

From web4college, the free CSS digger

#CSS digger
Was this article helpful?

 

This is the first child element.

This is the second child element.

▾
×

Ctrl+D