Max-content - Value CSS

max-content

Summary of characteristics of the max-content value

Quick description
Gives the dimension of a text without inserting line breaks.
Status
Standard
W3C Module
CSS Box Sizing Module
References (W3C)
Document status: WD (Working Draft)

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 : Defines the dimension of an element following the direction of the blocks.
  • 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 dimension of the element in the direction of the lines.
  • 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.

Cookie: Formerly a sweet little cake, which we accepted with pleasure. Today, a small, salty computer file, which some people refuse on principle.

Text with line breaks.

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

Cookie: Formerly a sweet little cake, which we accepted with pleasure.
Today, a small, salty computer file, which some people refuse on principle.

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

Cookie: Formerly a sweet little cake,
which we accepted with pleasure.
Today, a small, salty computer file,
which some people refuse on principle.

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.

CSS : Cascading Style Sheets.
Declarative language used for page layouts.
HTML : HyperText Markup Language.
Markup language.
XML : Extensible Markup Language.
Data Exchange Format.

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).

First element
Second element
Third et last element

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.

Column 1
Acceptance by browsers of the value max-content with the properties width, min-width, etc.
Column 2
Acceptance by browsers of the value max-content with height properties: height, min-height, etc.
Column 3
Acceptance by browsers of the value max-content as a value for the property flex-basis.
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

Max-content value historic.

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
Langue française
Sets the ratio of the width to the height of the element.
block-size
Defines the dimension of an element following the direction of the blocks.
box-sizing
Langue française
Defines how block dimensions are calculated: whether or not to include borders and padding.
contain-intrinsic-block-size
Langue française
Sets the dimension of the element in the direction of the blocks, when the element is confined.
contain-intrinsic-height
Langue française
Sets the intrinsic height of the element when it is confined.
contain-intrinsic-inline-size
Langue française
Sets the dimension of the element in the direction of the lines, when the element is confined.
contain-intrinsic-size
Langue française
Sets the dimensions of the element (blocks and rows) when the element is confined.
contain-intrinsic-width
Langue française
Sets the intrinsic width of the element when it is confined.
height
Sets the height of the element.
inline-size
Langue française
Sets the dimension of the element in the direction of the lines.
max-height
Sets a limit for the maximum height of the element.
max-width
Sets the maximum width of the element.
min-height
Langue française
Sets the minimum height of the element.
min-width
Langue française
Sets the minimum width of the element.
width
Langue française
Sets the width of the element.

Functions:

fit-content()
Calculates a dimension based on content and boundaries.

Values:

fit-content
Calculates the size of an element based on its contents and available space.
min-content
Donne la dimension d'un texte après avoir inséré le plus possible de retours à la ligne.