Max-width · WebPlatform Docs

max-width

Summary

Sets the maximum width for an element. It limits the width property to be larger than the value specified in max-width.

Overview table

Initial value none Applies to all elements but non-replaced inline elements, tables, inline tables, table cells, table columns, and column groups Inherited No Media visual Computed value the percentage as specified or the absolute length or ‘none’ Animatable Yes CSS Object Model Property max-width Percentages refer to width of containing block

Syntax

• max-width: calc()
• max-width: fill-available
• max-width: fit-content
• max-width: inherit
• max-width: length
• max-width: max-content
• max-width: min-content
• max-width: none
• max-width: percentage

Values

length Specifies a fixed width. Negative values are not allowed. See length for possible units. percentage A <percentage> relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed. calc() See css calc function for mode details. inherit Takes the same specified value as the property for the element’s parent. none Default. Clears the max-width value. The width property can have any value. max-content The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. min-content The narrowest measure a box could take that doesn’t lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. fill-available Fill the entire available space of from the containing block (Width minus vertical margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. fit-content If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.

Examples

Use max-width with any CSS selector to apply it.

/* Restrict all div elements to a max-width of 100px */ div { max-width: 100px }

Constrain the width of a div element using min-width and max-width attributes.

<style> /* Width set to 50% */ .width { width:50%; background:#eee; } /* min-width set to 600px */ .minwidth { width: 50%; min-width: 600px; background: lightblue; } /* max-width set to 600px */ .maxwidth { width: 50%; max-width: 200px; background: lightgreen } /* Content with border and padding */ .content { border:1px solid #c00; padding:5px; } </style> <h3>Resize the window to grow and shrink the div from max to min width.</h3> <div class="width"> <p class="content">This div also has a width of 50%. <br/><br/> Note that the div height increases to accommodate the flow of text.</p> </div> <div class="minwidth"> <p class="content">This div also has a width of 50%.<br /><br /> It also has a min-width of 600px.</p> </div> <div class="maxwidth"> <p class="content">This div also has a width of 50%.<br /><br /> It also has a max-width of 200px.</p> </div>

View live example

Usage

CSS max width is well supported across most browsers. A few things to consider while usage:

• min-width overrides max-width. If min-width supplied is greater than max-width, max-width does not have an impact.
• max-content, min-content, fit-content, and fill-available are in W3C draft stage and not supported across all browsers.
• Support for calc is better across browsers. Vendor prefixes may be needed.

Notes

Remarks

The min-width/max-width attributes apply to floating and absolutely positioned block and inline-block elements, as well as some intrinsic controls. They do not apply to non-replaced inline elements, such as table rows and row/column groups. (A “replaced” element has intrinsic dimensions, such as an img or textArea.) This property is enabled only under the strict !DOCTYPE.

Related specifications

CSS 2.1 (Section 10.7) W3C Recommendation CSS Intrinsic & Extrinsic Sizing Module Level 3 Working Draft

See also

Related articles

CSS Layout

• Responsive Web Design

• @import

• align-self

• background

• box-decoration-break

• box-flex

• box-lines

• box-orient

• box-pack

• box-shadow

• break-before

• flex-align

• flex-item-align

• flex-line-pack

• grid-auto-rows

• grid-definition-columns

• grid-definition-rows

• height

• max-width

• user-modify

• baseline-shift

Box Model

• border

• border-corner-shape

• bottom

• box-shadow

• box-sizing

• break-before

• clear

• float

• height

• left

• line-height

• margin

• margin-bottom

• margin-left

• margin-right

• margin-top

• max-height

• max-width

• min-height

• min-width

Related pages

• CSSStyleDeclarationCSSStyleDeclaration
• currentStylecurrentStyle
• runtimeStyleruntimeStyle
• stylestyle
• Cascading Style Sheet Compatibility in Internet Explorer 7

Attributions

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]