CSS max-block-size Property


The max-block-size CSS property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by the writing-mode property. In other words, it is the equivalent of either max-width or max-height, depending on the writing direction. The max-block-size property is useful for creating responsive designs that adapt to different screen sizes and orientations. For example, you can use it to ensure that an image never takes up more than half of the available space on the screen, regardless of whether the screen is in portrait or landscape mode.

Initial value
Applies to
same as width and height
Computed value
same as max-width and max-height
a length, percentage or calc();
JavaScript syntax


max-block-size: none | <max-width>


  • noneNo limit on the size of the box.
  • <max-width>Defines the max-block-size as an value or percentage.


<div class="standard-box">
Call me Ishmael. Some years ago—never mind how long precisely—having little or
no money in my purse, and nothing particular to interest me on shore, I
thought I would sail about a little and see the watery part of the world. It
is a way I have of driving off the spleen and regulating the circulation.
.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;

Browser Support

The following table will show you the current browser support for the CSS max-block-size property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 25th September 2023