Max width

Syntax

Class
Properties
max-w-{value}
max-width: {value};
max-w-min
max-width: min-content;
max-w-max
max-width: max-content;
max-w-full
max-width: 100%;

Parameters

value
<length-percentage unsigned default-unit=1px>
value
none
<div class="t1 p-16 bg-c-white shadow-4 w-50% max-w-200"> Lorem ipsum dolor sit amet. </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Set maximum width to 1px without specifying the px unit.
t1 max-w-1
.t1.max-w-1 { max-width: 1px; }
Set maximum width to 1px with specifying the px unit.
t1 max-w-1px
.t1.max-w-1px { max-width: 1px; }
Set maximum width to 50% of its container.
t1 max-w-50%
.t1.max-w-50\% { max-width: 50%; }
Set maximum width to 100% of its container using the alias `full`.
t1 max-w-full
.t1.max-w-full { max-width: 100%; }
Set maximum width to none.
t1 max-w-none
.t1.max-w-none { max-width: none; }
Set maximum width to min-content.
t1 max-w-min
.t1.max-w-min { max-width: min-content; }
Set maximum width to max-content.
t1 max-w-max
.t1.max-w-max { max-width: max-content; }