block-size

Definition

In CSS, the block-size property specifies the size of an element in the block direction. The block direction is the direction in which the element's content flows, which is typically vertical in left-to-right languages such as English.

Examples

To set the block size of an element to a fixed length:

div {
  block-size: 200px;
}

To set the block size of an element to the minimum size required to fit its content:

div {
  block-size: min-content;
}

To set the block size of an element to the maximum size required to fit its content:

div {
  block-size: max-content;
}

To set the block size of an element to the size required to fit its content, but allow it to be larger if the element's container allows it:

div {
  block-size: fit-content;
}

To set the block size of an element based on the size of its container:

div {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  block-size: auto;
}

Values

Best Practices

• Use the auto value as the default value for most elements. This allows the element's block size to be determined by its content, which is usually the desired behavior.
• Use the min-content or max-content values to specify a minimum or maximum block size for an element. This can be useful for preventing the element from becoming too small or too large, depending on the content.
• Use the fit-content value to specify a block size that fits the content, but can be larger if the element's container allows it. This can be useful for creating flexible layouts that adjust to the size of the content.
• Use the length value sparingly and with caution. Specifying a fixed block size may result in the element's content being truncated or overflowed if the content does not fit within the specified size.

Browser Compatibility

Some older web browsers may not support the block-size property. In particular, Internet Explorer 11 and earlier versions do not support the block-size property.