Pourquoi les éléments flexibles ne diminuent-ils pas la taille du contenu?

J'ai 4 colonnes flexbox et tout fonctionne bien, mais lorsque j'ajoute du texte à une colonne et que je le règle sur une grande taille de police, cela rend la colonne plus large qu'elle ne devrait l'être en raison de la propriété flex.

J'ai essayé d'utiliser word-break: break-wordet cela a aidé, mais quand je redimensionne la colonne à une très petite largeur, les lettres du texte sont divisées en plusieurs lignes (une lettre par ligne), et pourtant la colonne n'a pas une largeur plus petite qu'une taille de lettre .

Regardez cette vidéo (au début, la première colonne est la plus petite, mais lorsque j'ai redimensionné la fenêtre, c'est la colonne la plus large. Je veux juste toujours respecter les paramètres de flexion; tailles de flexion 1: 3: 4: 4)

Je sais, régler la taille de la police et le remplissage des colonnes sur plus petit aidera ... mais y a-t-il une autre solution?

Je ne peux pas utiliser overflow-x: hidden.

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

La taille minimale automatique des éléments flexibles

Vous rencontrez un paramètre par défaut de Flexbox.

Un élément flexible ne peut pas être plus petit que la taille de son contenu le long de l'axe principal.

Les valeurs par défaut sont ...

• min-width: auto
• min-height: auto

... pour les éléments flexibles respectivement dans le sens des lignes et dans le sens des colonnes.

Vous pouvez remplacer ces valeurs par défaut en définissant les éléments flex sur:

• min-width: 0
• min-height: 0
• overflow: hidden(ou toute autre valeur, sauf visible)

Spécifications Flexbox

4.5. Taille minimale automatique des éléments flexibles

Pour fournir une taille minimale par défaut plus raisonnable pour les éléments flexibles, cette spécification introduit une nouvelle autovaleur comme valeur initiale des propriétés min-widthet min-heightdéfinies dans CSS 2.1.

En ce qui concerne la autovaleur ...

Sur un élément flexible qui se overflowtrouve visibledans l'axe principal, lorsqu'il est spécifié dans la propriété min-size de l'axe principal de l'élément flexible, spécifie une taille minimale automatique . Sinon, il calcule 0.

En d'autres termes:

• Les valeurs par défaut min-width: autoet min-height: autos'appliquent uniquement lorsque overflowest visible.
• Si la overflowvaleur n'est pas visible, la valeur de la propriété min-size est 0.
• Par conséquent, overflow: hiddenpeut être un substitut pour min-width: 0et min-height: 0.

et...

• L'algorithme de dimensionnement minimal s'applique uniquement sur l'axe principal.
• Par exemple, un élément flexible dans un conteneur de direction de ligne n'est pas récupéré min-height: autopar défaut.
• Pour une explication plus détaillée, voir cet article:
  • rendu min-largeur différemment dans la direction flex: ligne et direction flex: colonne

Vous avez appliqué min-width: 0 et l'élément ne rétrécit toujours pas?

Conteneurs Flex imbriqués

Si vous traitez des éléments flexibles à plusieurs niveaux de la structure HTML, il peut être nécessaire de remplacer les éléments par défaut min-width: auto/ min-height: autoactifs à des niveaux supérieurs.

Fondamentalement, un élément flexible de niveau supérieur avec min-width: autopeut empêcher la réduction des éléments imbriqués ci-dessous avec min-width: 0.

Exemples:

• L'élément flexible ne rétrécit pas plus petit que son contenu
• Adapter l'enfant au parent
• La propriété CSS d'espace blanc crée des problèmes avec Flex

Notes de rendu du navigateur

• Chrome contre Firefox / Edge

  Depuis au moins 2017, il semble que Chrome soit (1) revienne aux min-width: 0/ min-height: 0defaults, ou (2) applique automatiquement les 0défauts dans certaines situations sur la base d'un algorithme mystère. (Cela pourrait être ce qu'ils appellent une intervention .) En conséquence, de nombreuses personnes voient leur mise en page (en particulier les barres de défilement souhaitées) fonctionner comme prévu dans Chrome, mais pas dans Firefox / Edge. Ce problème est traité plus en détail ici: divergence de flex-shrink entre Firefox et Chrome

• IE11

  Comme indiqué dans la spécification, la autovaleur des propriétés min-widthet min-heightest "nouvelle". Cela signifie que certains navigateurs peuvent toujours afficher une 0valeur par défaut, car ils ont implémenté la mise en page flexible avant la mise à jour de la valeur et parce que 0c'est la valeur initiale pour min-widthet min-heightdans CSS 2.1 . Un tel navigateur est IE11. D'autres navigateurs ont mis à jour la autovaleur la plus récente définie dans la spécification flexbox .

Démo révisée

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle