max-inline-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.

* Some parts of this feature may have varying levels of support.

Die max-inline-size CSS Eigenschaft definiert die horizontale oder vertikale Maximalgröße eines Blockelements, abhängig von dessen Schreibrichtung. Sie entspricht entweder der max-width oder der max-height Eigenschaft, abhängig vom Wert des writing-mode.

Wenn der Schreibmodus vertikal orientiert ist, bezieht sich der Wert von max-inline-size auf die maximale Höhe des Elements; ansonsten bezieht er sich auf die maximale Breite des Elements. Eine verwandte Eigenschaft ist max-block-size, die die andere Dimension des Elements definiert.

Probieren Sie es aus

Syntax

css
/* <length> values */
max-inline-size: 300px;
max-inline-size: 25em;
max-inline-size: anchor-size(width);
max-inline-size: anchor-size(--myAnchor 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

Die max-inline-size Eigenschaft nimmt die gleichen Werte an wie die Eigenschaften max-width und max-height.

Formale Definition

Anfangswertnone
Anwendbar aufwie bei width und height
VererbtNein
ProzentwerteInlinegröße des beinhaltenden Blocks
Berechneter Wertwie bei max-width und max-height
AnimationstypLängenangabe, Prozentsatz oder calc();

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()>

<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

Beispiele

Maximale Inline-Größe in Pixeln festlegen

HTML

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

CSS

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

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
max-inline-size
anchor-size()
Experimental
fit-content
fit-content()
Experimental
max-content
min-content

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch