CSS max-block-size

The max-block-size property in CSS allows you to set the maximum block-size of an element, which is the vertical dimension in the block direction, and is the height for most cases.

Let's see how the max-block-size property works with some examples:

Result:


    .box {
      max-block-size: 200px;
      background-color: lightblue;
      border: 1px solid black;
    }

This is a box with a maximum block size of 200px.

In the example above, we have created a CSS class named box with a max-block-size property set to 200px. This means that the height of the box will not exceed 200px, even if the content inside the box is larger.

You can also use other units like em or rem to set the max-block-size:

Result:


    .box {
      max-block-size: 10em;
      background-color: lightblue;
      border: 1px solid black;
    }

This is a box with a maximum block size of 10em.

With the example above, the height of the box will not exceed 10 times the size of the current font of the element. This allows for a more responsive design based on the font-size.

It is important to note that the max-block-size property only limits the maximum vertical size of the block element. Any content exceeding this limit will be hidden or overflow based on the overflow property set in the element.

Experiment with different values for the max-block-size property to see how it affects the block elements on your webpage.