CSS min-block-size Property

The min-block-size property defines the minimum size that an element is allowed to occupy along the block dimension — the logical axis that runs in the flow direction of the document. It establishes a lower bound for the used block-size during layout, so even when the surrounding layout, flex or grid rules, or intrinsic sizing would otherwise reduce an element, it cannot be made smaller than this constraint. The property is part of the logical-sizing family and is used to make layouts writing-mode–aware without switching between physical dimensions like height or width; it is not inherited by default and applies to the element’s own box when computing its used size. For comparison with a related physical property see min-height.

In practice, min-block-size interacts with other logical-size constraints and layout mechanisms. It works together with block-size (the element’s desired size on the block axis) and max-block-size (an upper bound) to form the range of allowed sizes during the formatting process; these constraints are taken into account when resolving intrinsic size calculations, percentage-based layout, and when distributing available space in layout models. Layout systems such as flexbox and grid respect the minimum block-size when determining how items shrink or expand, so a flex item will not be reduced below its established minimum even if the flex container’s algorithm would otherwise reduce it further.

Because min-block-size is a logical property, its effect depends on the element’s writing mode and directionality: in horizontal writing modes it maps to the usual vertical dimension, while in vertical writing modes it maps to the horizontal extent. It also interacts with box model considerations — for example, how padding and borders factor into the rendered result is influenced by box-sizing — and with overflow behavior: if content grows beyond the minimum the element may expand (up to limits) or trigger overflow handling such as scrolling or clipping depending on the container’s overflow settings (overflow). Because it imposes a lower bound, authors commonly use it to ensure minimum legibility, spacing, or to avoid unwanted collapse in responsive and component-based layouts while keeping layouts robust across different writing modes and orientations; see also layout positioning and size tuning via logical properties.