Max-content - Value CSS

The max-content value.

The max-content value is the widest width that text can take without newlines than those specifically stated in the document.
It can therefore frequently happen that the width max-content is larger than the available width, which will of course cause the element to overflow.

We will use max-content when we want to avoid line breaks in a text.

The calculation is made according to the writing direction (see writing-mode ). For Latin languages, it is therefore a width, but for languages that are written vertically the calculation corresponds to a height.

See also the values min-content and fit-content.

The max-content value can be used with the following properties:

• block-size : Sets the size of an element in the block direction. For Latin-based languages, this logical property is equivalent to height.
• flex-basis : Determines the default dimension of an element contained in a flex-box.
• grid-auto-columns : Sets the default width of columns in a grid.
• grid-auto-rows : Sets the default height of lines in a grid.
• grid-template-columns : Defines the number and width of columns in a grid.
• grid-template-rows : Defines the number and height of lines in a grid.
• height : Sets the height of the element.
• inline-size : Sets the size of the element in the inline direction. For Latin-based languages, this property is equivalent to width.
• max-height : Sets a limit for the maximum height of the element.
• max-width : Sets the maximum width of the element.
• min-height : Sets the minimum height of the element.
• min-width : Sets the minimum width of the element.
• width : Sets the width of the element.

Examples for the max-content value.

Text without imposed line breaks.

This first example shows text without any line breaks specified in the HTML. max-content is the total width of the text, which in this case is greater than the available width of that page.

Text with line breaks.

This element contains text with a line break imposed (br tag).

In the element below, three line breaks have been inserted.

Width of columns in a grid.

The columns in the grid below have a width defined by max-content: the cell that has the largest fixed content the width of its column. And on the other hand, no line breaks are generated.

Width of elements in a flex-box.

The width of elements in a flex-box can be set with max-content applied to the flex-basis property. If both the flex-grow and flex-shrink properties are set to 0, the resulting width will be exactly the one calculated by max-content (see our example below).

Setting widths in a table.

The max-content value can be used on the table tag to set the width of the array. All columns will then be expanded according to their contents, without line breaks ont the lines. However, it is not possible to use max-content to define the width of a cell (td tag) or of a particular column (col tag).

Browser compatibility with max-content.

The value max-content is used in very different contexts (sizing an element, sizing a flex-box child, etc.) of which you will find a summary below.

1

max-content
value, used with
width

2

max-content
value, used with
height

3

max-content
value, used with
flex-basis

Estimated overall support.

95%

95%

93%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Max-content value historic.

• CSS Box Sizing Module Level 3

  First description of the max-content value.
  

  September 27, 2012

  Working Draft.

  

  

  

See also, concerning the sizing.

The max-content value and everything related to element sizing is described in the CSS Box Sizing Module module.

Properties:

aspect-ratio

Sets the ratio of the width to the height of the element.

block-size

Sets the size of an element in the block direction. For Latin-based languages, this logical property is equivalent to height.

box-sizing

Defines how block dimensions are calculated: whether or not to include borders and padding.

contain-intrinsic-block-size

Sets the dimension of the element in the direction of the blocks, when the element is confined.

contain-intrinsic-height

Sets the intrinsic height of the element when it is confined.

contain-intrinsic-inline-size

Sets the dimension of the element in the direction of the lines, when the element is confined.

contain-intrinsic-size

Sets the dimensions of the element (blocks and rows) when the element is confined.

contain-intrinsic-width

Sets the intrinsic width of the element when it is confined.

height

Sets the height of the element.

inline-size

Sets the size of the element in the inline direction. For Latin-based languages, this property is equivalent to width.

max-height

Sets a limit for the maximum height of the element.

max-width

Sets the maximum width of the element.

min-height

Sets the minimum height of the element.

min-width

Sets the minimum width of the element.

width

Sets the width of the element.

Functions:

Values: