max-block-size

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

La propiedad max-block-size CSS especifica el tamaño máximo de un elemento en la dirección opuesta a la escritura dirigida como se especifica por writing-mode. Es decir, si la dirección de escritura es horizontal, entonces max-block-size es equivalente a max-height; si la dirección de escritura es vertical, max-block-size es el mismo que max-width.

El tamaño máximo de la otra dimensión se especifica usando la propiedad max-inline-size.

Esto es útil porque max-width se usa siempre para tamaños horizontales y max-height para tamaños verticales, y si necesita establecer longitudes basadas en el tamaño de su contenido de texto, debe ser capaz de hacerlo con la dirección de escritura en cuenta.

En los momentos que normalmente utilizaría max-height o max-width, debería usar max-block-size para establecer el "alto" máximo del contenido (incluso si esto no es un valor vertical) y max-inline-size para establecer el "ancho" máximo del contenido (aunque esto puede ser vertical en lugar de horizontal). Vea el Ejemplo, que muestra los diferentes modos de escritura en acción.

Pruébalo

Sintaxis

css

/* Valores de longitud <length> */
max-block-size: 300px;
max-block-size: 25em;

/* Valores de porcentaje <percent> */
max-block-size: 75%;

/* Valores de palabras clave */
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content(20em);

/* Valores globales */
max-block-size: inherit;
max-block-size: initial;
max-block-size: revert;
max-block-size: revert-layer;
max-block-size: unset;

Valores

El valor de la propiedad max-block-size puede ser cualquier valor que sea legal para las propiedades max-width y max-height:

<length>: Define max-block-size como un valor absoluto.
<percentage>: Define max-block-size como un porcentaje del tamaño del contenedor en el eje de bloque.
none: Sin límite en el tamaño del elemento.
max-content: El preferido intrínseco para max-block-size.
min-content: El mínimo intrínseco para max-block-size.
fit-content(<length-percentage>): Usa la fórmula fit-content con el espacio disponible reemplazado por el argumento especificado, es decir, min(max-content, max(min-content, argument)).

Cómo afecta el writing-mode a la direccionalidad

Los valores de writing-mode afectan al mapeo de max-block-size a max-width o max-height como a continuación:

Valores de `writing-mode`	`max-block-size` es equivalente a
`horizontal-tb`, `lr` Obsoleto , `lr-tb` Obsoleto , `rl` Obsoleto , `rb` Obsoleto , `rb-rl` Obsoleto	`max-height`
`vertical-rl`, `vertical-lr`, `sideways-rl` Experimental , `sideways-lr` Experimental , `tb` Obsoleto , `tb-rl` Obsoleto	`max-width`

Nota: Los valores de writing-mode: sideways-lr y sideways-rl, fueron eliminados de la especificación de escritura de nivel 3 de CSS en el proceso de diseño de sucesión. Pueden ser restaurados en el nivel 4.

Nota: Los modos de escritura lr, lr-tb, rl, rb, y rb-tl ya no están permitidos en contextos HTML; sólo se pueden usar en contextos 1.x SVG.

Definición formal

Valor inicial	`none`
Applies to	same as `width` and `height`
Heredable	no
Percentages	block-size of containing block
Valor calculado	same as `max-width` and `max-height`
Animation type	a length, percentage or calc();

Sintaxis formal

max-block-size = 
  <'max-width'>  

<max-width> = 
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Ejemplos

Configuración de max-block-size con texto horizontal y vertical

En este ejemplo, el mismo texto (las oraciones de apertura de Herman Melville's en la novela Moby-Dick) se presenta en ambos modos de escritura horizontal-tb y vertical-rl.

HTML

El HTML establece dos bloques <div> que se presentarán con su writing-mode establecido usando las clases horizontal o vertical. Ambos cuadros comparten la clase standard-box, que establece el color, el relleno y sus respectivos valores de max-block-size.

html

<p>Modo de escritura <code>horizontal-tb</code> (el valor predeterminado):</p>
<div class="standard-box horizontal">
  Llámame Ishmael. Hace algunos años, no importa cuántos años exactamente, sin
  dinero en mi bolsillo ni nada de interés particular, Pensé en navegar un poco
  y ver la parte acuosa del mundo. Eso es una forma que tengo de expulsar el
  bazo y regular la circulación.
</div>

<p>Modo de escritura <code>vertical-rl</code>:</p>
<div class="standard-box vertical">
  Llámame Ishmael. Hace algunos años, no importa cuántos años exactamente, sin
  dinero en mi bolsillo ni nada de interés particular, Pensé en navegar un poco
  y ver la parte acuosa del mundo. Eso es una forma que tengo de expulsar el
  bazo y regular la circulación.
</div>

CSS

El CSS define tres clases. La primera, standard-box, se aplica a ambos cuadros, como se ve arriba. Establece estilos estándar incluyendo el tamaño mínimo y máximo del bloque, el tamaño de la fuente, y así sucesivamente.

Después de eso vienen las clases horizontal y vertical, que añaden la propiedad writing-mode al cuadro, con el valor horizontal-tb o vertical-rl dependiendo de qué clase se utiliza.

css

.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

Resultado

Especificaciones

Specification
CSS Logical Properties and Values Level 1 # propdef-max-block-size
CSS Box Sizing Module Level 4 # sizing-values

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también

Las propiedades físicas mapeadas: max-width y max-height
Establecer el tamaño máximo de la otra dirección: max-inline-size
writing-mode