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


313

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>

Réponses:


543

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...


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:


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

jsFiddle


2
J'avais une balise parent <fieldset> beaucoup plus haut dans le dom, ce qui a causé le même problème. Fixer sa largeur minimale à 0 l'a corrigé.
Jan Swart

1
Toutes les réflexions sur celui-ci: stackoverflow.com/a/36247448/8620333 .. J'ai trouvé que cela a à voir avec min-widthmais pas vraiment sûr de tous les détails.
Temani Afif

3
On dirait que Chrome a changé le comportement de la v73 pour ne pas rétrécir plus petit que le contenu.
maccam94

2
Le même correctif a fonctionné avec min-height: 0;. J'ai dû essayer de régler cela pour plusieurs éléments supérieurs de l'arborescence.
Ben Wheeler

Je devais régler min-height: 0; m'installer dans 10 endroits pour le faire fonctionner. Merci, merci, merci pour le bon conseil!
dave0688
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.