CSS max-inline-size Property

❮ Previous Reference Next ❯

Example

p {
  background-color: #1A73E8;
  max-inline-size: 150px;
}



writing-mode:





Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.


Meaning:

The max-inline-size CSS property defines the horizontal or vertical maximum size of an element's block, depending on its writing mode. It corresponds to either the max-width or the max-height property, depending on the value of writing-mode.

If the writing mode is vertically oriented, the value of max-inline-size relates to the maximal height of the element; otherwise, it relates to the maximal width of the element. A related property is max-block-size, which defines the other dimension of the element.

Default value:none
Inherited:No
Animatable:Yes
Version:CSS3
JavaScript syntax:
object.style.maxInlineSize="none|length|percentage|max-content|min-content|fit-content(length|percentage)|initial|inherit|revert|revert-layer|unset";



Standard Syntax

max-inline-size: none|length|percentage|max-content|min-content|fit-content(length|percentage)|initial|inherit|revert|revert-layer|unset;



Browser Support




Status







Property Values

The following table describes the values of this property:

Value Description
none No limit on the size of the box.
length Defines the max-inline-size as an absolute value.
percentage Defines the max-inline-size as a percentage of the containing block's size in block axis.
max-content The intrinsic preferred max-inline-size.
min-content The intrinsic minimum max-inline-size.
fit-content(length|percentage) Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)).
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.



Default CSS Property Values

selectors {
  max-inline-size: none;
}
❮ Previous Reference Next ❯