Min-content - Value CSS

min-content

Summary of characteristics of the `min-content` value

Quick description

Donne la dimension d'un texte après avoir inséré le plus possible de retours à la ligne.

Status

Standard

W3C Module

CSS Box Sizing Module

References (W3C)

CSS Box Sizing Module Level 3

Document status: WD (Working Draft)

The `min-content` value.

The min-content value is the smallest width that a text can take, with returns to wherever possible. Very often min-content resolves to the length of the longest word.

The calculation of min-content is done according to the write direction defined by writing-mode . For Latin languages, the calculus corresponds to a width, but for languages that are written vertically, the calculus corresponds to a height.

See also the values max-content and fit-content which have a comparable utility.

Examples of use of `min-content`.

The examples below show the effect of the min-content value applied to the width of elements with the width. The height property is not set. Its initial value being auto, The height is calculated according to the content.
The text is a quote from Serge Gainsbourg.

Simple text.

In this first example, the width is determined by the longest word, in this case the superiority word.

Ugliness has this superiority to beauty, which is that it lasts.

Influence of hyphens.

In this second example, hyphens have been inserted into the text with the  entity. The browser therefore has more options for hyphenation. As a result, the width is smaller than in the previous example.

Note: Auto-hyphen dashes (hyphens:auto) are not generated.

Ugliness has this superiority to beauty, which is that it lasts.

Influence of non-breaking blanks.

Here it is non-breaking blanks that have been added between the last three words (entity  ). The browser cannot therefore cut off the last line, and rearranges the other lines according to this width.

Ugliness has this superiority to beauty, which is that it lasts.

Image behavior.

Images are non-breakable elements. In this example, the image defines the width of the element calculated by min-content.

Ugliness has this superiority to beauty, which is that it lasts.

Logo CSS

Sizing the column widths of a grid.

The min-content value can be used with grid-template-columns to size the columns in a grid. In this case, the contents of all the elements in the column are taken into account. In the example below, min-content was used to set both the width of the columns and the width of the grid itself.

We will probably never know if Firefox is a red panda or a fox.

The war between Internet Explorer and Netscape was ultimately fatal to both browsers.

Among 80 other languages, Google offers Klingon. ⁽¹⁾

CSS! It's so good!

The name "Google" comes from the number googol. ⁽²⁾

The role of the 1^st webcam created was to monitor the café.

(1) Klingon is an imaginary language, spoken by an alien race in the Star Treck series.

(2) The googol number is made up of a 1 followed by 100 zeros.

Width of elements in a flex-box.

The min-content value can be used with the flex-basis property to set the width of an element in a flex-box. But it should be kept in mind that the flex-grow and flex-shrink properties can allow for the enlargement or contraction of this dimension. In our example below, both of these properties have been set to 0.

Text-to-speech Oral restitution of a written text.

Speech-to-text Generating text from a voice recording.

Text-to-image Creating an image from a description.

Setting the width of a table.

The min-content value can be used to set the width of an array. The width of all columns is then reduced to a minimum. But it is not possible to use min-content to set the width of a column, differently than other columns.

The `min-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.

Browser compatibility with the `min-content` value.

Column 1

Acceptance by browsers of min-content as a value for the properties width, min-width, grid-template-columns, and so on.

Column 2

Acceptance by browsers of min-content as a value for the properties height, min-height, grid-template-rows, and so on.

Column 3

Acceptance by browsers of min-content as a value for flex-basis.

min-content
value
used with
width

min-content
value
used with
height

min-content
value, used with
flex-basis
(flex-box)

Estimated overall support.

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

The `min-content` value historic.

CSS Box Sizing Module Level 3

First definition of the min-content value.

September 27, 2012
Working Draft.

Min-content - Value CSS

Summary of characteristics of the `min-content` value

The `min-content` value.