W3cubDocs

max-width

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.

Try it

max-width overrides width, but min-width overrides max-width.

Syntax

/* <length> value */
max-width: 3.5em;

/* <percentage> value */
max-width: 75%;

/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content(20em);

/* Global values */
max-width: inherit;
max-width: initial;
max-width: revert;
max-width: revert-layer;
max-width: unset;

Values

<length>: Defines the max-width as an absolute value.
<percentage>: Defines the max-width as a percentage of the containing block's width.
none: No limit on the size of the box.
max-content: The intrinsic preferred max-width.
min-content: The intrinsic minimum max-width.
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)).

Accessibility concerns

Ensure that elements set with a max-width are not truncated and/or do not obscure other content when the page is zoomed to increase text size.

Formal definition

Initial value	`none`
Applies to	all elements but non-replaced inline elements, table rows, and row groups
Inherited	no
Percentages	refer to the width of the containing block
Computed value	the percentage as specified or the absolute length or `none`
Animation type	a length, percentage or calc();

Formal syntax

max-width = 
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  

<length-percentage> = 
  <length>      |
  <percentage>

Examples

Setting max width in pixels

In this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller.

HTML

<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>

CSS

#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}

Result

Specifications

Specification
CSS Box Sizing Module Level 4 # width-height-keywords

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`max-width`	1	12	1 CSS 2.1 leaves the behavior of `max-width` with `table` undefined. Firefox supports applying `max-width` to `table` elements.	7	4 CSS 2.1 leaves the behavior of `max-width` with `table` undefined. Opera supports applying `max-width` to `table` elements.	1	4.4	18	4 CSS 2.1 leaves the behavior of `max-width` with `table` undefined. Firefox supports applying `max-width` to `table` elements.	14	1	1.0
`fit-content`	46 25	79 79	3 Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.	No	44	11 7 2	46 ≤37	46	4 Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.	43	11 7 1	5.0
`fit-content_function`	No	No	91	No	No	No	No	No	No	No	No	No
`max-content`	46 22	79 79	66 3	No	44	11 7 2	46 ≤37	46	66 4	43	11 7 1	5.0
`min-content`	46 25	79 79	66 3	No	44	11 7 2	46	46	66 4	43	11 7 1	5.0
`stretch`	22	79	No	No	15	No	4.4	25	No	14	No	1.5