Max-content - Value CSS
Summary of characteristics of the max-content
value
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.
Text with line breaks.
This element contains text with a line break imposed (br tag).
Today, a small, salty computer file, which some people refuse on principle.
In the element below, three line breaks have been inserted.
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.
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.
max-content
with the properties width
, min-width
, etc.max-content
with height properties: height
, min-height
, etc.max-content
as a value for the property flex-basis
.max-content
value, used with
width
max-content
value, used with
height
max-content
value, used with
flex-basis
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.
-
CSS Box Sizing Module Level 3
First description of themax-content
value.September 27, 2012Working 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:










