CSS block-size Property

The block-size property defines the horizontal or vertical size of an element based on its writing direction.

selector { block-size: value; }
auto The browser automatically calculates the size based on content and layout context.
<length> Sets a fixed size using standard units like px, em, or rem.
<percentage> Defines the size as a percentage of the parent container's block-size.
min-content Shrinks the block-size to the smallest possible fit for the content.
max-content Expands the block-size to the largest possible fit for the content.
fit-content(<length-percentage>) Uses the available space up to a specified maximum limit.

Code Examples

A basic example showing how block-size defines the height of a container in a standard horizontal writing mode.

<div style="block-size: 200px; inline-size: 100%; background-color: #f4f4f4; border: 2px solid #333333;">
  This box has a logical block-size of 200px, acting as the height in this horizontal layout.
</div>

An advanced example using JavaScript to toggle between horizontal and vertical writing modes, demonstrating how block-size adapts its orientation.

<div id="dynamicBox" style="block-size: 150px; inline-size: 150px; background-color: #0088cc; color: #ffffff; writing-mode: horizontal-tb; transition: all 0.5s;">
  Logical Size Demo
</div>
<button onclick="toggleDirection()">Toggle Writing Mode</button>

<script>
function toggleDirection() {
  const box = document.getElementById("dynamicBox");
  const isHorizontal = box.style.writingMode === "horizontal-tb";
  box.style.writingMode = isHorizontal ? "vertical-rl" : "horizontal-tb";
  // Note how the 150px block-size switches from height to width
  box.style.blockSize = isHorizontal ? "300px" : "150px";
}
</script>

Pro Tip

You can use block-size in combination with max-block-size and min-block-size to create extremely resilient components. If you are building a flexible card component, setting a min-block-size ensures the card never looks too squished, even if there is very little text, while still allowing it to grow if the user increases their font size.

Deep Dive

In the standard web layout we use every day, block-size is just a logical replacement for height. Think of it like a stack of shipping pallets. Usually, you stack them from the ground up, so the block-size is how tall that stack is. However, if you switch the writing-mode to a vertical orientation, like you see in many East Asian scripts, the stack now grows from right to left. In that scenario, block-size actually controls the width. This is a logical property, meaning it adapts to the flow of the content rather than being locked to the physical dimensions of the screen. It allows your layout to remain consistent regardless of the language or text direction being used by the visitor.

Best Practices

Always reach for block-size instead of the traditional height property when you are building applications meant for a global audience. This ensures that if the writing-mode changes, your layout doesn't break. It is also cleaner to use logical properties consistently across your CSS so that your margins, padding, and sizes all follow the same flow-based logic.

Common Pitfalls

A common mistake is forgetting that block-size relies on the writing-mode. If you haven't explicitly set a writing-mode, it defaults to horizontal-tb (top-to-bottom), which makes block-size behave exactly like height. Also, keep in mind that percentage-based block-sizes only work if the parent element has a defined size; otherwise, the browser won't know what to calculate the percentage against.

Accessibility

Using logical properties like block-size improves accessibility for international users. When text is rotated or translated into a language with a different flow, logical properties ensure that the container scales correctly, preventing text from overlapping or becoming hidden, which is vital for users who rely on screen magnifiers or custom stylesheets.

Dev Data Table: block-size property

default auto
animatable yes
inherited no
experimental no
year_intro 2014
year_standard 2021
js_syntax_1 element.style.blockSize = "200px";
js_syntax_2 element.style.setProperty("block-size", "200px");
js_note When manipulating this property in JavaScript, remember that it returns the logical size, which may map to offsetHeight or offsetWidth depending on the current writing-mode.
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...