--- title: max-width slug: Web/CSS/max-width tags: - Referencia_CSS translation_of: Web/CSS/max-width ---
{{CSSRef}}

The max-width CSS property sets the maximum width of an element. It prevents the used value of the {{ Cssxref("width") }} property from becoming larger than the value specified by max-width.

/* <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;
max-width: fill-available;

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

{{ Cssxref("max-width") }} overrides {{cssxref("width")}}, but {{ Cssxref("min-width") }} overrides {{ Cssxref("max-width") }}.

{{cssinfo}}

Syntax

Values

{{cssxref("<length>")}}
The maximum width, expressed as a {{cssxref("<length>")}}.
{{cssxref("<percentage>")}}
The maximum width, expressed as a {{cssxref("<percentage>")}} of the containing block's width.

Keyword values

none
The width has no maximum value.
max-content{{experimental_inline()}}
The intrinsic preferred width.
min-content{{experimental_inline()}}
The intrinsic minimum width.
fill-available{{experimental_inline()}}
The containing block's width minus the horizontal margin, border, and padding. (Note that some browsers implement an ancient name for this keyword, available.)
fit-content{{experimental_inline()}}
The same as max-content.

Formal syntax

{{csssyntax}}

Examples

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

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

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

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

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

The fit-content value can be used to set the width of an element based on the intrinsic size required by its content:

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

#child  {
  background: gold;
  width: 100%;
  max-width: -moz-fit-content;
  max-width: -webkit-fit-content;
}

{{EmbedLiveSample("fit-content-demo", 400, 100)}}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }} {{ Spec2('CSS3 Sizing') }} Adds the max-content, min-content, fit-content, and fill-available keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.)
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }} {{ Spec2('CSS3 Transitions') }} Defines max-width as animatable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }} {{ Spec2('CSS2.1') }} Initial definition.

Browser compatibility

{{Compat("css.properties.max-width")}}

See also