Max-content - Valeur CSS

max-content

Résumé des caractéristiques de la valeur max-content

Description rapide
Donne la dimension d'un texte sans insérer de retours à la ligne.
Statut
Standard
Module W3C
Module CSS - Dimensionnement des blocs
Références (W3C)
Statut du document: WD (document de travail)

La valeur max-content.

La valeur max-content est la plus grande largeur que peut prendre un texte sans retour à la ligne autres que ceux qui sont expressément indiqués dans le document.
Il peut donc arriver fréquemment que la largeur max-content soit plus grande que la largeur disponible, ce qui provoquera bien sûr un débordement de l'élément.

On utilisera max-content lorsqu'on veut éviter les retours à la ligne dans un texte.

Le calcul est effectué en fonction de la direction d'écriture (voir writing-mode). Pour les langues latines, il s'agit donc d'une largeur, mais pour les langues qui s'écrivent verticalement le calcul correspond à une hauteur.

Voir aussi les valeurs min-content et fit-content.

La valeur max-content peut être utilisée avec les propriétés suivantes :

  • block-size : Définit la dimension d'un l'élément suivant la direction des blocs. Pour les langues latines, cette propriété logique est équivalente à height.
  • flex-basis : Détermine la dimension par défaut d'un élément contenu dans un flex-box.
  • grid-auto-columns : Définit la largeur par défaut des colonnes dans une grille.
  • grid-auto-rows : Définit la hauteur par défaut des lignes dans une grille.
  • grid-template-columns : Définit le nombre et la largeur des colonnes d'une grille.
  • grid-template-rows : Définit le nombre et la hauteur des lignes d'une grille.
  • height : Définit la hauteur de l'élément.
  • inline-size : Définit la dimension de l'élément dans la direction des lignes. Pour les langues latines cette propriété est équivalente à width.
  • max-height : Définit une limite à la hauteur maximale de l'élément.
  • max-width : Définit la largeur maximale de l'élément.
  • min-height : Définit la hauteur minimale de l'élément.
  • min-width : Définit la largeur minimale de l'élément.
  • width : Définit la largeur de l'élément.

Exemples avec la valeur max-content.

Texte sans retours à la ligne imposés.

Ce premier exemple présente un texte sans aucun retour à la ligne spécifié dans le HTML. max-content correspond à la largeur totale du texte, qui dans ce cas, est supérieure à la largeur disponible de cette page.

Cookie : Anciennement petit gâteau sucré, qu’on acceptait avec plaisir. Aujourd’hui, petit fichier informatique drôlement salé, que certains refusent par principe.

Texte avec des retours à la ligne.

Cet élément contient un texte avec un retour à la ligne imposé (balise br).

Cookie : Anciennement petit gâteau sucré, qu’on acceptait avec plaisir.
Aujourd’hui, petit fichier informatique drôlement salé, que certains refusent par principe.

Dans l'élément ci-dessous trois retours à la ligne ont été insérés.

Cookie : Anciennement petit gâteau sucré,
qu’on acceptait avec plaisir.
Aujourd’hui, petit fichier informatique drôlement salé,
que certains refusent par principe.

Largeur des colonnes d'une grille.

Les colonnes de la grille ci-dessous ont une largeur définie par max-content : la cellule qui a le contenu le plus grand fixe la largeur de sa colonne. Et d'autre part, aucun saut de ligne n'est généré.

CSS : Cascading Style Sheets.
Langage déclaratif utilisé pour les mises en page.
HTML : HyperText Markup Language.
Langage à balises.
XML : Extensible Markup Language.
Format d'échange de données.

Largeur des éléments dans un flex-box.

La largeur des éléments d'un flex-box peut être définie avec max-content appliquée à la propriété flex-basis. Si les propriétés flex-grow et flex-shrink sont toutes deux fixées à 0, la largeur obtenue sera exactement celle calculée par max-content (voir notre exemple ci-dessous).

Premier élément
Deuxième élément
Troisième et dernier élément

Définition des largeurs dans un tableau.

La valeur max-content peut être utilisée sur la balise table pour définir la largeur du tableau. Toutes les colonnes seront alors élargies en fonction de leur contenu sans retour à la ligne. Par contre il n'est pas possible d'utiliser max-content pour définir la largeur d'une cellule (balise td) ou d'une colonne particulière (balise col).

Compatibilité de la valeur max-content.

La valeur max-content s'utilise dans des contextes très différents (dimensionnement d'un élément, dimensionnement d'un enfant de flex-box, etc.) dont vous trouverez uns synthèse ci-dessous.

Colonne 1
Acceptation par les navigateurs de la valeur max-content avec les propriétés width, min-width, etc.
Colonne 2
Acceptation par les navigateurs de la valeur max-content avec les propriétés de hauteur : height, min-height, etc.
Colonne 3
Acceptation par les navigateurs de la valeur max-content comme valeur pour la propriété flex-basis.
1
Valeur
max-content
utilisée avec
width
2
Valeur
max-content
utiisée avec
height
3
Valeur
max-content
utilisée avec
flex-basis
Estimation de la prise en charge globale.
95%
95%
93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse

Historique de la valeur max-content.

Voir aussi, concernant le dimensionnement.

La valeur max-content et tout ce qui concerne le dimensionnement des éléments est décrit dans le module Module CSS - Dimensionnement des blocs.

Propriétés :

aspect-ratio
Définit le ratio entre la largeur et la hauteur de l'élément.
block-size
Définit la dimension d'un l'élément suivant la direction des blocs. Pour les langues latines, cette propriété logique est équivalente à height.
box-sizing
Définit le mode de calcul des dimensions de blocs : en incluant ou non les bordures et les marges intérieures.
contain-intrinsic-block-size
Définit la dimension de l'élément dans la direction des blocs, lorsque l'élément est confiné.
contain-intrinsic-height
Définit la hauteur intrinsèque de l'élément lorsque celui-ci est confiné.
contain-intrinsic-inline-size
Définit la dimension de l'élément dans la direction des lignes, lorsque l'élément est confiné.
contain-intrinsic-size
Définit les dimensions de l'élément (blocs et lignes) lorsque l'élément est confiné.
contain-intrinsic-width
Définit la largeur intrinsèque de l'élément lorsque celui-ci est confiné.
height
Définit la hauteur de l'élément.
inline-size
Définit la dimension de l'élément dans la direction des lignes. Pour les langues latines cette propriété est équivalente à width.
max-height
Définit une limite à la hauteur maximale de l'élément.
max-width
Définit la largeur maximale de l'élément.
min-height
Définit la hauteur minimale de l'élément.
min-width
Définit la largeur minimale de l'élément.
width
Définit la largeur de l'élément.

Fonctions :

fit-content()
Calcule une dimension en fonction du contenu et de limites.

Valeurs:

fit-content
Calcule la dimension d'un élément en fonction de son contenu et de la place disponible.
Max-content
Donne la dimension d'un texte sans insérer de retours à la ligne.
min-content
Donne la dimension d'un texte après avoir inséré le plus possible de retours à la ligne.