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

Question

J'ai 4 colonnes flexbox et tout fonctionne bien, mais lorsque j'ajoute du texte à une colonne et que je la 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 inférieure à une taille de lettre .

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

Je sais, définir une taille de police et un remplissage de colonne plus petits 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>

Answer 1

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 dans le sens des lignes et dans le sens des colonnes, respectivement.

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

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

---

Spécification 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é sur la propriété min-size de l'axe principal de l'élément flexible, spécifie une taille minimale automatique . Il calcule autrement 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 à min-width: 0et min-height: 0.

et...

• L'algorithme de dimensionnement minimum s'applique uniquement sur l'axe principal.
• Par exemple, un élément flex dans un conteneur de direction de ligne n'est pas obtenu min-height: autopar défaut.
• Pour une explication plus détaillée, consultez cet article:
  • min-width rendu différemment dans flex-direction: row et flex-direction: column

---

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

Conteneurs Flex imbriqués

Si vous traitez avec 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: autoon aux 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 Flex 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) revenant aux min-width: 0/ min-height: 0defaults, ou (2) appliquant automatiquement les 0valeurs par défaut dans certaines situations basées sur un algorithme de 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: écart de flex-shrink entre Firefox et Chrome

• IE11

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

Answer 2

Je trouve que cela m'a mordu à plusieurs reprises au fil des ans pour le flex et la grille, je vais donc suggérer ce qui suit:

* { min-width: 0; min-height: 0; }

puis utilisez simplement min-width: autoou min-height: autosi vous avez besoin de ce comportement.

En fait, ajoutez également le dimensionnement de la boîte pour rendre toute mise en page plus sensée:

* { box-sizing: border-box; min-width: 0; min-height: 0; }

Est-ce que quelqu'un sait s'il y a des conséquences étranges? Je n'ai rien rencontré depuis plusieurs années en utilisant un mélange de ce qui précède. En fait, je ne peux penser à aucun cas où je voudrais mettre en page du contenu vers l'extérieur vers le flex / grid, plutôt que flex / grid vers le contenu --- et sûrement s'ils existent, ils sont rares. Cela ressemble donc à un mauvais défaut. Mais peut-être que je manque quelque chose?