CSS max-block-size Property

Defines the maximum size of an element in the block direction, which is height in standard top-to-bottom layouts.

selector { max-block-size: value; }
none Prevents any limit from being placed on the size of the block.
<length> Defines a fixed maximum size using standard units like px, em, or rem.
<percentage> Sets the maximum size as a percentage of the containing block's size in the block axis.
max-content The intrinsic preferred maximum size based on the content inside the element.
min-content The intrinsic minimum maximum size, often based on the longest word or unbreakable element.
fit-content(<length-percentage>) Uses the fit-content formula with the available space replaced by the specified argument.

Code Examples

A basic example limiting a box to 300 pixels in the block direction with a scrollbar for overflow.

.content-box {
  max-block-size: 300px;
  overflow: auto;
  border: 2px solid #333333;
  padding: 10px;
}

An advanced example using JavaScript to toggle writing modes, demonstrating how the block size constraint adapts to the layout flow.

<div id="dynamicBox" style="max-block-size: 200px; writing-mode: horizontal-tb; border: 5px solid #ff0000; overflow: hidden;">
  This box has a logical maximum size limit.
</div>
<button onclick="toggleFlow()">Toggle Writing Mode</button>

<script>
function toggleFlow() {
  const el = document.getElementById("dynamicBox");
  const isVertical = el.style.writingMode === "vertical-rl";
  el.style.writingMode = isVertical ? "horizontal-tb" : "vertical-rl";
  el.style.maxBlockSize = isVertical ? "200px" : "400px";
  console.log("Max block size is currently: " + el.style.maxBlockSize);
}
</script>

Pro Tip

Combine max-block-size with the CSS clamp function to create fluid boundaries. You can set a limit that scales with the viewport but never exceeds a hard pixel value, keeping your layout looking sharp on both mobile and ultra-wide monitors without writing extra media queries.

Deep Dive

Think of an accordion folder. You can stuff it with papers, but there is a physical limit to how thick it can get before it stops expanding. That is what max-block-size does for your digital boxes. The block direction is the way lines of text stack on top of each other. In English, that is vertical (top to bottom). This property is a logical property, meaning it is smarter than max-height. If you change your website's writing mode to a vertical language like Japanese, max-block-size automatically switches from limiting the height to limiting the width. It respects the flow of the content rather than being locked to physical screen coordinates.

Best Practices

Use max-block-size instead of max-height when building layouts intended for an international audience. It ensures your design constraints stay consistent even if the text flow direction changes. It is also great for preventing UI components like cards or modals from growing so tall they disappear off the screen on small devices. Always pair it with an overflow property if you expect the content might exceed the limit.

Common Pitfalls

A common mistake is forgetting that this property does nothing if the content is smaller than the limit. It is a ceiling, not a floor. Also, if you use a percentage, make sure the parent element has a defined size, otherwise the browser won't know what to calculate that percentage against, and the property might appear to do nothing at all.

Accessibility

If you set a max-block-size that is too small, text might be cut off or overlap other elements. This makes your site unreadable for people using large font settings. Always ensure that if content exceeds the maximum size, you provide a scrollbar using overflow: auto so that all users can still access the hidden information.

Dev Data Table: max-block-size property

default none
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.maxBlockSize = '500px';
js_syntax_2 element.style.setProperty('max-block-size', '500px');
js_note When manipulating this property in JavaScript, remember that the value will affect height in horizontal layouts but width in vertical layouts.
browsers { "Chrome": 57, "Edge": 79, "Firefox": 41, "Safari": 12.1, "Opera": 44, "Chrome Android": 57, "Safari on iOS": 12.2, "Samsung Internet": 7, "Opera Mobile": 43 }
results render here...