Maximum width
max-width
Specify the maximum width for elements that automatically change their size.
Property values
This value will be used when the text of an element is so long that it doesn't completely fit within the normal width for the element. The element's width will expand up to the amount of space required to fit everything.
If that expanded width is less than the max-width property, the element's actual width is set to that expanded value (somewhere between width and max-width).
When the expanded width is more than the value specified for max-width, the element's width is capped at max-width, and the extra text is subject to the overflow-x rule, either causing a horizontal scrollbar to appear or causing the overflowed text to be hidden.
Units
Use any of these font-relative typographic units to set the element's maximum width:
| em | em | The font-size of the current font |
| rem | relative em | The font-size of the <html> element |
| ch | "0" | The advance measure (the width) of the current font's "0" glyph |
| ic | ideograph count | The advance measure (the width) of the current font's "水" ideograph |
Or use any of these fixed size units which are independent of the current font:
| % | percent | A percentage of the parent element's width |
| in | inch | A size equal 96px |
| px | pixels | A size equal to 1/96 inch |
| pt | point | A size equal 1in/72 = 1.33px |
| pc | pica | A size equal 1in/6 = 12pt = 16px |
| cm | centimeter | A size equal to 96px/2.54 = 37.8px |
| mm | millimeter | A size equal to 96px/25.4 = 3.8px |
| Q | quarter millimeter | A size equal to 96px/1016 = 0.94px |
Or use these viewport-percentage units which account for different display device capabilities:
| vh | viewport height | 1% of the viewport's height |
| vw | viewport width | 1% of the viewport's width |
| vi | viewport inline axis | 1% of the viewport's inline axis |
| vb | viewport block axis | 1% of the viewport's block axis |
| vmin | viewport minimum | Either vh or vw, whichever is smaller |
| vmax | viewport maximum | Either vh or vw, whichever is larger |
Examples
max-width: 80%;