Diemax-inline-sizeCSS-Eigenschaft definiert die horizontale oder vertikale maximale Größe eines Blocks eines Elements, abhängig vom Schreibmodus. Sie entspricht entweder der Eigenschaftmax-width oder der Eigenschaftmax-height, je nach Wert deswriting-mode.

Wenn der Schreibmodus vertikal ausgerichtet ist, bezieht sich der Wert vonmax-inline-size auf die maximale Höhe des Elements; andernfalls bezieht er sich auf die maximale Breite des Elements. Eine verwandte Eigenschaft istmax-block-size, die die andere Dimension des Elements definiert.

Probieren Sie es aus

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>  <div>    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: white;}

Syntax

/* <length> values */max-inline-size: 300px;max-inline-size: 25em;max-inline-size: anchor-size(width);max-inline-size: anchor-size(--my-anchor self-block, 200px);/* <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: fit-content(20em);/* Global values */max-inline-size: inherit;max-inline-size: initial;max-inline-size: revert;max-inline-size: revert-layer;max-inline-size: unset;

Werte

Diemax-inline-size-Eigenschaft nimmt die gleichen Werte an wie die Eigenschaftenmax-width undmax-height.

Formale Definition

Formale Syntax

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

Beispiele

Festlegen der maximalen Inline-Größe in Pixeln

HTML

<p>Example text</p>

CSS

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die zugeordneten physikalischen Eigenschaften:max-width undmax-height
• writing-mode