max-inline-size

La propiedad de CSS max-inline-size define el tamaño máximo horizontal o vertical de un elemento bloque dependiendo del modo de escritura. Esto corresponde a las propiedades max-width o max-height dependiendo de los valores definidos por writing-mode. Si el modo de escritura esta orientado verticalmente, el valor de max-inline-size relacionado al alto máximo del elemento, de lo contrario, se relaciona con el ancho máximo del elemento. Se relaciona con max-block-size, que define la otra dimensión del elemento.

Pruébalo

max-inline-size: 150px;
writing-mode: horizontal-tb;

max-inline-size: 150px;
writing-mode: vertical-rl;

max-inline-size: 20px;
writing-mode: horizontal-tb;

max-inline-size: 75%;
writing-mode: vertical-lr;

<section class="default-example" id="default-example">
 <div class="transition-all" id="example-element">
 This is a box where you can change the max-inline-size.
 </div>
</section>

#example-element {
 display: flex;
 flex-direction: column;
 background-color: #5b6dcd;
 height: 80%;
 justify-content: center;
 color: #ffffff;
}

Sintaxis

/* <length> values */
max-inline-size: 300px;
max-inline-size: 25em;
/* <percentage> values */
max-inline-size: 75%;
/* Keyword values */
max-inline-size: none;
max-inline-size: max-content;
max-inline-size: min-content;
max-inline-size: fit-content;
max-inline-size: fill-available;
/* Global values */
max-inline-size: inherit;
max-inline-size: initial;
max-inline-size: unset;

Valores

La propiedad max-inline-size toma los mismos valores como las propiedades max-width y max-height.

Sintaxis formal

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

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

<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> = 
 <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 

Ejemplo

Contenido HTML

<p class="exampleText">Example text</p>

Contenido CSS

.exampleText {
 writing-mode: vertical-rl;
 background-color: yellow;
 block-size: 100%;
 max-inline-size: 200px;
}

Especificaciones

Compatibilidad con navegadores

Mira también

• Las propiedades físicas mapeadas: max-width y max-height
• writing-mode