web-dev-qa-db-fra.com

Pourquoi les éléments flexibles ne rétrécissent-ils pas au-delà de la taille du contenu?

J'ai 4 flexbox colonnes et tout fonctionne bien, mais lorsque j'ajoute du texte à une colonne et que je la mets à une taille de police élevée, la colonne est plus large que prévu en raison de la propriété flex.

J'ai essayé d'utiliser Word-break: break-Word et 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), mais la colonne ne devient pas plus petite. largeur d'une taille de lettre.

Regardez ceci 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 respecter les paramètres de flex toujours; tailles de flex 1: 3: 4: 4)

Je sais, régler la taille de la police et le remplissage des colonnes sur une valeur inférieure aidera ... mais existe-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>
htmlcsscss3flexbox
226
tomas657

La taille minimale automatique des éléments Flex

Vous rencontrez un paramètre par défaut flexbox.

Un élément flex ne peut pas être plus petit que la taille de son contenu sur 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 celui des colonnes, respectivement.

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écification Flexbox

4.5. Taille minimale automatique des éléments Flex

Pour fournir une taille minimale par défaut plus raisonnable pour les éléments flex, cette spécification introduit une nouvelle valeur auto en tant que valeur initiale des propriétés min-width et min-height définies dans CSS 2.1.

En ce qui concerne la auto valeur ...

Sur un article flexible dont overflow est visible dans 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 . Il calcule autrement à 0.

En d'autres termes:

  • Les valeurs par défaut min-width: auto et min-height: auto s'appliquent uniquement lorsque overflow est visible.
  • Si la valeur overflow n'est pas visible, la valeur de la propriété min-size est 0.
  • Par conséquent, overflow: hidden peut remplacer min-width: 0 et min-height: 0.

et...

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

Conteneurs Flex imbriqués

Si vous utilisez des éléments flexibles à plusieurs niveaux de la structure HTML, il peut s'avérer nécessaire de remplacer le code min-width: auto/min-height: auto par défaut pour les éléments de niveaux supérieurs.

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

Exemples:

Notes de rendu du navigateur

  • Chrome vs Firefox/Edge

    Depuis au moins 2017, il semble que Chrome soit (1) soit de revenir aux valeurs par défaut min-width: 0/min-height: 0, ou (2) d'appliquer automatiquement les valeurs par défaut 0 dans certaines situations basées sur un algorithme de mystère. (Cela pourrait être ce qu'ils appellent un intervention .) En conséquence, de nombreuses personnes voient leur mise en forme (notamment les barres de défilement souhaitées) fonctionne comme prévu dans Chrome, mais pas dans Firefox./Edge. Ce problème est traité plus en détail ici: différence entre rétrécissement de la flexion entre Firefox et Chrome

  • IE11

    Comme indiqué dans la spécification, la valeur auto des propriétés min-width et min-height est "new". Cela signifie que certains navigateurs peuvent toujours restituer une valeur 0 par défaut, car ils ont implémenté la structure flexible avant la mise à jour de la valeur et parce que 0 est la valeur initiale de min-width et min-height dans CSS 2.1 . IE11 est l'un de ces navigateurs. D'autres navigateurs ont mis à jour la nouvelle valeur auto définie dans 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

384
Michael_B