CSS min-block-size Property

Sets the minimum size of an element in the block direction, which corresponds to height in standard horizontal layouts.

selector { min-block-size: value; }
<length> Defines the minimum size as a specific fixed value using units like px, em, or rem.
<percentage> Defines the minimum size as a percentage of the containing block's size in the block axis.

Code Examples

A basic example showing a container with a minimum height that adapts to content growth.

<div style="min-block-size: 150px; background-color: #dddddd; border: 2px solid #333333; padding: 20px;">
  This container will always be at least 150px tall, but it will grow if you add more content.
</div>

An advanced example demonstrating how the property works in vertical writing modes and how to manipulate it via JavaScript.

<div id="dynamicBox" style="min-block-size: 100px; writing-mode: vertical-rl; background-color: #eeeeee; padding: 10px;">
  Because the writing-mode is vertical, min-block-size controls the width here.
</div>
<button onclick="expandBox()">Expand Floor</button>

<script>
function expandBox() {
  const el = document.getElementById("dynamicBox");
  el.style.minBlockSize = "250px";
  el.style.backgroundColor = "#ffcc00";
}
</script>

Pro Tip

You can use min-block-size in combination with CSS variables to create a theme-able layout where the minimum height of sections can be updated globally with a single variable change, ensuring your UI remains consistent across different views.

Deep Dive

Think of min-block-size as a floor for your element's height. In a standard top-to-bottom layout, it acts exactly like min-height. However, the beauty of logical properties is that they adapt to the writing mode. If you change the writing-mode of your document to a vertical style, such as for Japanese or Chinese text, min-block-size automatically shifts to control the minimum width instead of height. It ensures that the container never collapses smaller than your defined value, but it still allows the container to grow naturally if the content inside exceeds that size. This makes your layouts more robust and ready for internationalization.

Best Practices

Use min-block-size instead of min-height when building layouts that might be translated into languages with different writing directions. It is best used on flexible containers like cards, headers, or main content areas where you want a consistent minimum appearance but need the element to expand to fit its contents.

Common Pitfalls

The most common mistake is expecting a percentage value to work when the parent container has no defined size. Just like the height property, a percentage min-block-size requires the parent to have a specific size to calculate against. Also, remember that if you set an explicit block-size (height) that is smaller than the min-block-size, the min-block-size value will win.

Accessibility

Ensure that your minimum size doesn't create a situation where content becomes obscured or requires awkward scrolling when users zoom in or increase their default text size. Always test your layout with large font settings to ensure the 'floor' you've set doesn't break the user experience.

Dev Data Table: min-block-size property

default 0
animatable yes
inherited no
experimental no
year_intro 2014
year_standard 2021
js_syntax_1 element.style.minBlockSize = "100px";
js_syntax_2 element.style.setProperty("min-block-size", "100px");
js_note When using JavaScript, the property follows camelCase as minBlockSize on the style object.
browsers { "Chrome": 69, "Edge": 79, "Firefox": 41, "Safari": 12.1, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 12.2, "Samsung Internet": 10.1, "Opera Mobile": 48 }
results render here...